Jump to content
Search Community

Creating animatable page transitions

alfianridwan test
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.

 

Thanks!

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.

 

.logoContainerActive{

position:absolute;

height: 100vh;

width: 100vw;

right:0;

left:0;

bottom:0;

top:0;

display: flex;

justify-content: center;

align-content: center;

}

 

$(‘a’).onclick(function(){

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

tl.to(‘.logo.container’,0.7,{className:’logoContainerActive’}

});

 

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

Hi,

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

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.
×
×
  • Create New...