how to continue animation onComplete, gsap stagger?

[iamruletik 3 Likes (Newbie)]

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

[mvaneijgen 2,469 Likes (Superhero)]

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

[iamruletik 3 Likes (Newbie)]

@mvaneijgen thanks a lot ) i will try to redo animation with your input

[iamruletik 3 Likes (Newbie)]

@mvaneijgen Hi again )
Thanks again for the direction, I recreated animation with your base and get this

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

[iamruletik 3 Likes (Newbie)]

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

[mvaneijgen 2,469 Likes (Superhero)]

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

[iamruletik 3 Likes (Newbie)]

@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

[mvaneijgen 2,469 Likes (Superhero)]

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.