Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
whizzbbig

How to make preloader transitions using gsap

Go to solution Solved by nico fonseca,

Recommended Posts

Hi, I am very new to gsap and trying to make a preloader transition to the page. but, I've never made any transition before not know how to make it. I wanted to achieve the transition achieved in this website. https://adrienlaurent.fr/.

 

and also if i get some advices and some tips on how to make your own custom page transition using gsap would be appreciated 🙏

 

this pen has the preloader and some images i want to have a preloader transition to the page like the way it is in the website i mentioned above i not know the way i can achieve it

See the Pen eYRNzxv by raj-shukla (@raj-shukla) on CodePen

Link to comment
Share on other sites

  • Solution

Hey @whizzbbig I created a very small demo for you.

See the Pen fa5f335f743d719744d4f34243a2250f by nicofonseca (@nicofonseca) on CodePen



To create this type of animation you'll need a loading animation and an entrance animation. So, when all the images are loaded or the loading animation finished you'll start the entrance animation.
And you don't need the setTimeout() 🙂

For the shape effect you shared, you can use:

 

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

11 hours ago, nicofonseca said:

Hey @whizzbbig I created a very small demo for you.
 

 


To create this type of animation you'll need a loading animation and an entrance animation. So, when all the images are loaded or the loading animation finished you'll start the entrance animation.
And you don't need the setTimeout() 🙂

For the shape effect you shared, you can use:

 

 

 

Hi, sir thankyou for helping me again. I checked for that shape effect and he is using canvas webgl to achieve that kind of effect but I'll try to do with the MorphSVGPlugin nomatter how much i am new to GSAP I'll try to make it work. thanks again sir for helping me out :)

  • Like 1
Link to comment
Share on other sites

17 minutes ago, whizzbbig said:

I checked for that shape effect and he is using canvas webgl

 

SVG can do the exact same shapes as canvas and vise versa. 😉

  • Like 3
Link to comment
Share on other sites

2 hours ago, OSUblake said:

SVG can do the exact same shapes as canvas and vise versa. 😉

 

There even is an older thread, discussing how to get that same exact effect working with SVG :) 

 

 

 

  • Like 3
Link to comment
Share on other sites

I've probably linked to it at least 5 times by now, and I still have to search from scratch every time 😅

  • Haha 2
Link to comment
Share on other sites

2 hours ago, nicofonseca said:

@whizzbbig To use the MorphSVGPlugin you need a path element, or you can use the convertToPath() method 🙂
 

 

I feel so embarrass by asking silly questions the truth is that i am learning :c gsap by petr tichy and not completed with the basics but here in this project i tried to 

See the Pen ExXVxGW?editors=0010 by raj-shukla (@raj-shukla) on CodePen

 integrate this svg to the preloader it not seems to work here sorry for disturbing again and again ;_; you helped me already that i am in debt

Link to comment
Share on other sites

@whizzbbig there is a HTML syntax error, that's why you don't see nothing.

Btw if you started learning recently this is very advance. My recommendation is to start with small animations and go forward step by step. The important thing is that you learn and understand what is going on and not only if the animation is the same as the final result. If you keep studying, in a short period of time you'll surely get to do these animations and better. 🙂


I created a pen for you with the example @akapowl provided:

See the Pen 513288671475953c9d672f201d799510 by nicofonseca (@nicofonseca) on CodePen



Also, a little explanation of how I did it:
First you need to separate everything in different "layers": loading, mask and page to be able to control which one is ahead.

Then, we need to animate the loading transition in, and when all images are loaded we execute the entrance animation.
The entrance animation has the loader animation out, mask and page animation, so you can control easily the timings. 
A little about paths, a path contains lots of coordinates so that's why you'll see a lot of numbers, letters. Probably, at the beginning it won't be clear but if you go here: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths you'll understand better how to create a path. So, in order to animate a path you need to animate those coordinates and this is when GSAP appears and save us lol because you can say to GSAP to go from one path to another one and that's where the magic happens.

I hope this helps, as I saw you motivated I wanted to explain a little bit more but keep in mind that there is more than one way to do it, the important thing here is that you learn and understand how it works. 🤘



 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Sweet demo, nice explanation and some real good advice there @nicofonseca 💪

  • Like 2
  • Thanks 2
Link to comment
Share on other sites

3 hours ago, nico fonseca said:

I hope this helps, as I saw you motivated I wanted to explain a little bit more but keep in mind that there is more than one way to do it, the important thing here is that you learn and understand how it works. 🤘

Thankyou sir, I really wanted that kind of explanation to get what working there. I am really very very grateful to you sir from the heart 🙂  I want to learn from you and the peoples out there who make eye catching surreals and help to the upcoming generation thankyou sir for doing somuch for me 🙏

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×