alfianridwan

Creating animatable page transitions

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!

Share this post


Link to post
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?

Share this post


Link to post
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. 👍

Share this post


Link to post
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 :)

 

Share this post


Link to post
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!

Share this post


Link to post
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: 

See the Pen editor by aahlfeeyann (@aahlfeeyann) on CodePen

Share this post


Link to post
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.