Stacking cards, how do I stop the animation earlier?

[MikeS]

The animation works fine, but I wanted them to take a bit longer and have multiple animations play at the same time.
To achieve this I set scrollTrigger.end to 'bottom -1000px', doing so, the animations will overlap and will be a lot slower.

 

However, the animation is now overflowing on the other content.

I understand why it happens, but I am unsure as to what other approach I should use to not have this issue?

Ideally, the the pins get removed when we reach the bottom of the container, but again, I am unsure how to achieve this.

Any help is greatly appreciated!

See the Pen xxaqQjV by mikesnoeren (@mikesnoeren) on CodePen

[mvaneijgen]

Hi @MikeS welcome to the forum! 

 

Instead of making a ScrollTrigger for each card why not wrap them in a container and add a ScrollTrigger to the whole container and animate all the cards within that. It seems like you want all the cards to interact with each other so having them be part of the same animation seems like a much easier approach, because then you just have to manage one start and one end trigger and you can use the same tween by just using a stagger on it, see the Stagger docs. 

 

Take a look at this video from the Greenock YouTube channel. It kinda deals with the same idea, but in reverse! Hope it helps and happy tweening! 

 

 

[MikeS]

Hi @mvaneijgen, thank you for your help!

I tried reworking the animation, and I think I am close..

The only thing I can't seem to get working is to have the elements pinned in the right way. I am sure I am missing something, can you help me out?

 

 Here is an updated codepen: 

See the Pen bGxqOqP by mikesnoeren (@mikesnoeren) on CodePen

[mvaneijgen]

Sure. CSS is really important when working with GSAP. Personally I like positioning my elements where they should end up when the animation is done! So in your CSS I've used CSS Grid to have all the elements stack on top of each other. 

 

When working with ScrollTrigger the best thing to do with it is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. That is what I've done with the below pen. Because I've moved to a timeline it's easy just to toggle ScrollTrigger on and off while working to get a better understanding what the animation is doing. 

 

I've placed some comments within your code to describe what certain parts of the code are doing. Hope it helps and happy tweening! 

 

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

[MikeS]

Thanks a lot @mvaneijgen, I used your example to create this: 

See the Pen bGxqJzd by mikesnoeren (@mikesnoeren) on CodePen

 

Do you see any ways to improve this? Either performance wise, but also code wise.
Thanks in advance!