mquint
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by mquint
-
-
Hello! I have fairly simple animations in a timeline with scroll trigger:
gsap .timeline({ scrollTrigger: { trigger: document.getElementById("scene-1"), scrub: 0.5, start: "top top", end: "bottom bottom" } }) .addLabel("Scene 1") .to(".scene-1-1", { opacity: 0, y: -80, duration: 1 }, "+=2") .to(".bg-1-1", { opacity: 0, duration: 1 }, "-=1") .to(".scene-1-2", { opacity: 1, y: -40, duration: 1 }) .to(".scene-1-2", { opacity: 0, y: -80, duration: 1 }, "+=2") .to(".bg-1-2", { opacity: 0, duration: 1 }, "<") .to(".scene-1-3", { opacity: 1, y: -40, duration: 1 }) .to(".scene-1-3", { opacity: 0, y: -80, duration: 1 }, "+=2")
Text blocks fade in and out, and backgrounds fade out to reveal the next background.
Everything works fine when I'm scrolling down the page, but sometimes when I'm scrolling back up (going through the timeline in reverse) the text elements don't always return all the way to opacity 0. (I have the opacity defaulted to 0 in styles).
Here's a demo version: https://codesandbox.io/s/interesting-volhard-yc6frk?file=/src/animations.js
Hoping there's something just I missed for scroll trigger settings?
Opacity animations with ScrollTrigger not finishing when scrolling back up
in GSAP
Posted
Thank you, that fixed it! It's been a while since I looked at the react docs, context must be newer!