Jump to content

Mattia Sireno

Scrolltrigger stacking cards problem with infinite cards

Recommended Posts

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

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.