Jump to content


Creating animatable page transitions

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi everyone, this is more of an ask-for-help and guidance rather than actually coding help, but I came across a very nice website page transition, which include its website logo transitioning between 2 pages. I was wondering if its possible to apply with GSAP? Here's the animation I am referring to: https://cl.ly/rXmT


It would be great if someone could forward me to somewhere where I can learn to replicate the aforementioned effect.



Link to comment
Share on other sites

Yo! I think you can just add a listener on every link on your page that would trigger the animation. You can even use bodymovin for your animation or the best solution is use barba.js or smoothstate.js?

Link to comment
Share on other sites

Sorry I forgot to add of course it possible with GSAP.


im not so good at coding yet but its something like this i assume.




height: 100vh;

width: 100vw;





display: flex;

justify-content: center;

align-content: center;




var tl = new Timelinelite({onComplete: reversedContainer})




function reversedContainer(){

// reverse animation code here



sorry i know this might not work but you get the point. im also just learning and i think if I help and learn with others it will help me learn fast. ?

Link to comment
Share on other sites


Disregard what I just written hahaha. I just saw the video on the phone and comment on the phone. I saw that its more on transition. What I did is only animation. Now I need to try barba.js :)


Link to comment
Share on other sites

Haha, its alright @miks, I understand what you try to do. I am just not sure how to apply it as a page transition. If you managed to do it with barba.js or smoothstate.js do let me know!

Link to comment
Share on other sites

Hey @miks, thanks for the Codepen, I have forked it. It works really well, plus it really help me kickstart Barba.js! For anyone else who needs more help in making the animation smoother, I added another class to animate the position of the logo itself, and added it in the timeline with tweenmax. Here's the edited pen: https://codepen.io/aahlfeeyann/project/editor/DWnwop

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.