mquint Posted October 10, 2023 Share Posted October 10, 2023 (edited) 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? Edited October 10, 2023 by mquint linked to less relevant file of code sandbox Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted October 10, 2023 Solution Share Posted October 10, 2023 Hi @mquint and welcome to the GSAP Forums! The main issue is that you are working with React and you're not using GSAP Context: https://gsap.com/docs/v3/gsap/methods/gsap.context() Adding this to your animations.js file: export default function animate() { gsap.registerPlugin(ScrollTrigger); const tl = gsap .timeline({ scrollTrigger: { ... } }) // ... instances here return tl; } And then making this change to your App.js file: useLayoutEffect(() => { const ctx = gsap.context(() => { timeLine.current = animate(); }); return () => ctx.revert(); }, []); Seems to work as you expect. Finally I strongly recommend you to check the resources in this page: https://gsap.com/resources/React Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
mquint Posted October 11, 2023 Author Share Posted October 11, 2023 Thank you, that fixed it! It's been a while since I looked at the react docs, context must be newer! 1 Link to comment Share on other sites More sharing options...
Rodrigo Posted October 11, 2023 Share Posted October 11, 2023 16 hours ago, mquint said: context must be newer! Well... not really, it was released in 3.11 over a year ago: https://gsap.com/blog/3-11/ Happy Tweening! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now