Jump to content
Search Community

how to continue animation onComplete, gsap stagger?

iamruletik test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

Hi there )
I'm trying to replicate cool animation with perspective cards from https://qude.audio/ 

 Video of animation 

I'm kind of replicated this animation in my codepen, but I can't quite grasp on to how make some subtle effects. Like in original animation when new card is in focus the old ones continues to animate. And how to change scale on each element incrementally? Like in referenced animation I want to each element become smaller than the next.

See the Pen MWZwMrR by iamruletik (@iamruletik) on CodePen

Link to comment
Share on other sites

I would start by building out a timeline with the animations you want and let ScrollTrigger be for the moment. When you got the perfect animation it will be trivial to hook it up to ScrollTrigger. 


Mix and matching CSS pinning (position: fixed, sticky, ect) with GSAP is a bit tricky, better is to have ScrollTrigger handle all that through pinning.  In the below pen I've moved your CSS around a bit and have positioned all the cards on top of each other, then in GSAP I move them all down some amount times the current index. Then the animation .from() off screen to their position and then an extra tween to tilt and scale them and set their opacity. I've used gsap.utils.mapRange() to calculate the scale, based on the current index and some fixed values (check out more awesome functions here https://greensock.com/docs/v3/GSAP/UtilityMethods


I've used a stagger offset which I've learned from our own @Carl to have the tweens overlap a bit. This is where the magic will be to get the butter smooth animations you've linked. 



So this animation is not yet complete, but I'll leave the rest to you. I hope this nudges you in the right direction and otherwise post back here!


See the Pen OJryLqp?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 4
Link to comment
Share on other sites

  • 4 weeks later...
  • Solution

They seem pretty centred to me, do you have a screenshot of what you find is not centred?


Based on your calculation the .first div should move up -12px and it scales should be 0.6786, because each scale step is 0.0357, I've also set to end: "bottom bottom", so now it property ends in the pen. To me this looks like the perfect animation, well build!


See the Pen zYyEOaR?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

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