Cards pin on scroll and unpin once last card finish animation

[nafiul09]

Hello everyone,

 

I am new to GSAP and have been trying to achieve something for the last couple of hours, but I am not 100% sure how to do it.

 

I want to pin the cards on top of each other, and each time a new card is set to pin, it should have some distance set by attributes. Additionally, when a new card starts its animation, all other pinned cards should reduce in opacity by 0.4. Lastly, once the last card finishes its animation, everything should return to normal.

I have provided a CodePen link. Please check it and let me know how I can fix it.

Thanks in advance.

See the Pen bGZKGdW by nafiul09 (@nafiul09) on CodePen

[nafiul09]

@Cassie Can you look into this, please? I think you have solved something similar to this previously. 

[GSAP Helper]

Howdy! I don't have a lot of time right now to dig into everything here, but I wanted to offer you some quick advice about how to get the most out of these forums...

 

Keep it simple. Don't list a bunch of requirements ("it should ___, and ____, and then also ____ while _____ ..." - that's too difficult to follow). Just pick the very first thing and see if you can make that work. If you get stuck, post one question focused on that one piece, like "how can I pin each section one at a time?" Keep your CodePen focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. 

 

Baby steps 🙂

 

Before you know it, things will fall into place one at a time.

 

In the meantime, I think this thread from @mvaneijgen might be helpful: 

And maybe this too: 

 

Good luck!

[nafiul09]

Tried but not sure what's the issue. Can anyone please help me with this?

Thanks,
Nafiul

[Rodrigo]

Hi,

 

Maybe something like this?

See the Pen bGZKWjp by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[nafiul09]

Thanks @Rodrigo this is what I needed but yeah I did update the animation a little bit to fit my requirements.

Here is the updated codepan if anyone is really interested in checking the codes.

See the Pen qBvyEMr by nafiul09 (@nafiul09) on CodePen