MikeS

Hi everyone, I recently created my first script using GSAP to animate a series of cards that stack on top of each other as the user scrolls down the page. I wanted the animation to stop early for the last four cards, so they wouldn't completely fade out like the others. Please keep in mind that this is my first GSAP project and I am not aware of all of the GSAP functions. I would really appreciate it if someone could review my code and let me know if there are any optimizations I could make or if I missed any GSAP functions that could help me achieve my goal. Lastly, I wonder if there's anything I can do to improve performance? It works great on desktops, but gets a bit choppy on mobile phones.. Parhaps because of the opacity rendering? Here's the code:

Thanks a lot @mvaneijgen, I used your example to create this: https://codepen.io/mikesnoeren/pen/bGxqJzd Do you see any ways to improve this? Either performance wise, but also code wise. Thanks in advance!

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: https://codepen.io/mikesnoeren/pen/bGxqOqP

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!