Marhime Posted November 23, 2023 Share Posted November 23, 2023 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 Link to comment Share on other sites More sharing options...
Toso Posted November 23, 2023 Share Posted November 23, 2023 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 🙏 1 Link to comment Share on other sites More sharing options...
Rodrigo Posted November 24, 2023 Share Posted November 24, 2023 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! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now