Search the Community
Showing results for tags 'scrolltrigger scrub'.
Found 3 results
-
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
