Opacity animations with ScrollTrigger not finishing when scrolling back up

[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? 

Edited October 10, 2023 by mquint
linked to less relevant file of code sandbox

[Rodrigo]

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!

 

 

[mquint]

Thank you, that fixed it! It's been a while since I looked at the react docs, context must be newer! 

[Rodrigo]

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!