scrolltrigger Scrolltrigger stacking cards problem with infinite cards

[Mattia Sireno]

Hi everyone!

 

This is my first post on this forum, and I hope to explain myself better.

I have a problem related to stacking cards, which I cannot create a Scrolltrigger for infinite cards.
My goal is to create a list with only the last 3 cards visible, leaving the active card centered.

Below I leave you an example of how my work should be: This is a similar work

 

My code below will explain the situation better than me

 

See the Pen yLjxNZg by Dyakho (@Dyakho) on CodePen

[Rodrigo]

Hi @Mattia Sireno and welcome to the GreenSock forums!

 

The first approach should be to use the same start point for every card, no need to change them. Then animate the Y position so it moves to the top.

 

This is not the complete work but hopefully is enough to get you started:

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

 

Finally here you can find some extra inspiration here:

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

 

Let us know how it works.

 

Happy Tweening!

[Mattia Sireno]

Hi Rodrigo!

Thank you so much for the immediate reply and sorry for replying just now.

Thanks to your inspiration I was able to complete my example, which I will leave below if anyone wants to use it.

If you want to take a look and tell me if the last part of the code (using the OnLeave event of the Scrolltrigger) is correct or I could do better.

 

Thank you again!

 

See the Pen mdLvNOv by Dyakho (@Dyakho) on CodePen