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