Stacking Cards: translate Y - Keep cards in postion when reaching the end pin

[equionx94]

Everything works perfectly, until i add in: gsap.to(card, { y: -progress * 25 });

 

The Y translate gets overwritten when I reach the end-pins trigger. Is there a way to keep the Y translate position after reaching the end-pin or some other way of doing this? I want to keep the cards stacked on top of each other as you scroll past the end-pin.

 

If you comment out the gsap.to(card, { y: -progress * 25 }); that is how I want everything to act, but I want the cards to move upwards slightly as you scroll too.

See the Pen LYaWYpE by enox94 (@enox94) on CodePen

[ryan_labar]

Yes, translating the y value here is causing the wires to get a bit crossed. You could consider using yPercent to avoid this: gsap.to(card, { yPercent: -progress * 6.25 })

I got the 6.25 value by: (desired y value) / (card height) * 100 to get the percentage. 25/400*100.

[equionx94]

24 minutes ago, ryan_labar said:

Yes, translating the y value here is causing the wires to get a bit crossed. You could consider using yPercent to avoid this: gsap.to(card, { yPercent: -progress * 6.25 })

I got the 6.25 value by: (desired y value) / (card height) * 100 to get the percentage. 25/400*100.

Thank you so much!

[equionx94]

On 1/16/2024 at 12:23 PM, ryan_labar said:

Yes, translating the y value here is causing the wires to get a bit crossed. You could consider using yPercent to avoid this: gsap.to(card, { yPercent: -progress * 6.25 })

I got the 6.25 value by: (desired y value) / (card height) * 100 to get the percentage. 25/400*100.

Thanks so much for this again, but just noticed that when I reach the end/re-enter the pinned section, the cards transform resets to 0, and re animates back. You can see what I mean in the code pen if you scroll back and forth between the end-pin marker on card 1 and 2.

 

I've looked up docs on how to reverse an animation to no solution, but I'm not sure if that's what I want here.

[ryan_labar]

Is there any reason you need to animate the cards onUpdate? A scrub animation seems like it'd be the better option here. Something like this:

See the Pen BabWvxM?editors=1010 by ryan_labar (@ryan_labar) on CodePen