Jump to content


how to continue animation onComplete, gsap stagger?

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

one thing that i can't get is how to properly align items in the center

Link to comment
Share on other sites

  • 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

@mvaneijgenthank you) i mostly meant not the whole structure being centered, but particular card 
the whole animation is centered, but when I scroll cards, cards themselves placed closer to the bottom

Link to comment
Share on other sites

Welp, I don't see it 🤷‍♂️ 


My advies, disable your JS and see if you elements are centred that way and if not, fix it in CSS first, to see if that fixes your JS.

  • 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.