Search the Community

Required Hi GSAP team, I'm building a smart printing interface for my project. I want to create a high-end scroll animation where a "PDF icon" moves from a phone mockup down into a "kiosk" tray as the user scrolls. The Setup: Using ScrollTrigger with scrub: true. Using Lenis for smooth momentum scrolling. The goal is to have the file scale down and fade out exactly as it "enters" the kiosk. The Issue: I want to ensure the alignment stays perfect across different screen sizes and that the Lenis smooth scroll doesn't interfere with the ScrollTrigger start/end points. I've attached my minimal CodePen demo above. Any advice on best practices for this "path" animation would be amazing! Thanks in advance! Drag files here to attach, or choose files...Required Drag files here to attach, or choose files...Required Drag files here to attach, or choose files...

I am using scrollTrigger with pin option to pin down a section of my web app but, having it in a timeline, I see it creates a second scrollbar. I don't know if it's related but if scrolling really slowly, the animation and the overall page's layout breaks. How can I fix this? Link to demo: https://stackblitz.com/edit/vitejs-vite-qvotiuq8?file=src%2Fcomponents%2FHome.tsx,src%2Fcomponents%2FTech.tsx,src%2FApp.tsx&terminal=dev

Greetings! I have these two simple scrub animations. The first makes each section fade in when it enters and the second makes each section fade out when it leaves. They work fine like this but I imagine there's a way to cleanly combine the two, but I can't figure out how... const fadeIns = gsap.utils.toArray('.d-section'); fadeIns.forEach(fadeIn => { gsap.to(fadeIn, { scrollTrigger: { trigger: fadeIn, start: 'top 66%', end: 'top 33%', scrub: true, }, autoAlpha: 1, ease: 'none', }) }); const fadeOuts = gsap.utils.toArray('.d-section'); fadeOuts.forEach(fadeOut => { gsap.to(fadeOut, { scrollTrigger: { trigger: fadeOut, start: 'bottom 66%', end: 'bottom 33%', scrub: true, immediateRender: false, }, autoAlpha: 0, ease: 'none', }) });

I tried to recreate the scrolltrigger footer unmask animation from https://chroniclehq.com/, but when I added the scrub:true property, the animation starts to be instant. How to fix this? Here's the minimal demo: https://stackblitz.com/edit/stackblitz-starters-cwggx8?embed=1&file=app/page.tsx