Setting runBackwards to "true" breaks scrollTrigger tweens

[SteveS]

The title says it for the most part. I have a gsap.to tween on several elements. I pass the first element a property that enables runBackwards (or all the elements) and it causes all of the tweens to stop functioning.

 

 useEffect(() => {

        let toggleActions;

        toggleActions = "play reverse play reverse";

        if (first) {
            toggleActions = "none play reverse none"
        }

        if (last) {
            toggleActions = "play none none reverse"
        }

        const anim = gsap.to(containerRef.current, {
            autoAlpha: 1,
            duration: .3,
            ease: "power4.inOut",
            runBackwards: true,
            scrollTrigger: {
                toggleActions,
                trigger: containerRef.current,
                start: "top center",
                end: "bottom center"
            }
        });

        return () => {
            anim.kill()
        }
    }, [])

It's not caused by toggleActions because turning that on and off doesn't do anything.

Am I doing something wrong? This feels like it should just work.

[SteveS]

I almost instantly solved my own problem. As it happens, immediateRender is by default false for .to tweens, and true for .from tweens. The documentation says that anything with a scrollTrigger applied has it set to true by default, but it seems that its not doing so for runBackwards tweens? When I set it manually it works as expected.

[GreenSock]

Glad you got it sorted out. 

 

I'm curious - are you using React 18? They introduced some funky behavior where it calls the same block of code TWICE in strict mode (the default locally). That, of course, messes with the logic of .from() tweens (which is what you're doing when you set runBackwards: true, immediateRender: true). It's not a bug or problem in GSAP - it's a React/logic thing. I can explain more if you'd like, but I figured I'd spare you the lengthy explanation unless you wanted it

[SteveS]

I am using React 18, however, I am working with Strict mode disabled.

[GreenSock]

Got it. Okay, so you got it all figured out, right? You don't need more help? 

[SteveS]

It is now working, I just don't understand why it wasn't. If anyone else runs into this issue hopefully they come across this thread. Should I make a github issue about this?

[GreenSock]

If you'd like me to look further into your case and craft an explanation, please provide a minimal demo in CodeSandbox or CodePen and I'd be glad to take a peek. You definitely don't need to create a Github issue.