Jump to content
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: https://codepen.io/aahlfeeyann/project/editor/DWnwop

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.