SteveS Posted May 19, 2022 Share Posted May 19, 2022 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. Link to comment Share on other sites More sharing options...
SteveS Posted May 19, 2022 Author Share Posted May 19, 2022 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. Link to comment Share on other sites More sharing options...
GreenSock Posted May 19, 2022 Share Posted May 19, 2022 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 Link to comment Share on other sites More sharing options...
SteveS Posted May 19, 2022 Author Share Posted May 19, 2022 I am using React 18, however, I am working with Strict mode disabled. Link to comment Share on other sites More sharing options...
GreenSock Posted May 19, 2022 Share Posted May 19, 2022 Got it. Okay, so you got it all figured out, right? You don't need more help? Link to comment Share on other sites More sharing options...
SteveS Posted May 19, 2022 Author Share Posted May 19, 2022 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? Link to comment Share on other sites More sharing options...
GreenSock Posted May 19, 2022 Share Posted May 19, 2022 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. 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