nelsonsantos

Hi @Rodrigo, Thank you so much for your time and guidance. I'm relatively new to GSAP, and it turns out the solution was much simpler than I initially thought. I suppose I just need to dedicate more time to studying! The stagger effect is now working flawlessly. I only need to make a few adjustments, but overall, the effect is achieving exactly what I wanted. Thanks again!!

https://stackblitz.com/edit/react-ncl7wh?file=src%2FApp.js I prepared this sample snippet. The scroll effect is spot-on, so you can easily tell the difference between a gentle roll and a more intense one. I've also thrown in the stagger property, and it behaves just like it does on my own machine.

Shure, give me some time!

Hello everyone, I'm currently trying to replicate the effect demonstrated in the uploaded GIF. While I've successfully implemented the easing effect, I'm encountering difficulties with the stagger effect. I've experimented with various approaches, with the latest attempt shown below. I can prepare a CodePen example if needed. Perhaps I'm overlooking something simple. Any guidance or suggestions would be greatly appreciated. Thank you! useGSAP(() => { let proxy = { translate: 0 }, translateSetter = gsap.quickSetter(".video-grid-content-container", "translateY", "px"), clamp = gsap.utils.clamp(-40, 40); ScrollTrigger.create({ onUpdate: (self) => { let translate = clamp(self.getVelocity() / -100); if (Math.abs(translate) > Math.abs(proxy.translate)) { proxy.translate = translate; gsap.to(proxy, { translate: 0, duration: 0.4, stagger: { amount: 10, from: "start" }, overwrite: true, onUpdate: () => translateSetter(proxy.translate) }); } } }); });