React pagination with animation on enter

[Marhime]

Hello,

 

I have a projet on Nextjs with some GSAP for animations. I have created a simple Component for animate list of elements on scroll.

 

But this time I need to make animation on scroll and when I click on "Voir plus".

 

And I couldn't find how to achieve this behavior. If someone can help.

 

Here is the codepen

 

 

Thanks

See the Pen poGVYzg by maxime-joyes (@maxime-joyes) on CodePen

[Toso]

here is a better way to create future demos or testing for GSAP inside frameworks 

 

https://stackblitz.com/@GreenSockLearning/collections

 

 

I'm sure someone will help you soon since I found like 4 5 issues not sure which one you want to fix or if that behavior was intended 🙏

[Rodrigo]

Hi,

 

This would be my approach:

https://stackblitz.com/edit/vitejs-vite-ddk2fs?file=src%2FApp.jsx&terminal=dev

 

It uses a simple selector in the ScrollTrigger Batch method and also a simple class in the CSS in order to hide the new elements initially. Of course this should be in sync with the amount of elements being added on every click event.

 

Also this uses our brand new useGSAP hook, simple, clean and easy!

 

Hopefully this helps.

Happy Tweening!