Christopher Evans

@nicofonseca This did indeed work, thank you! Why does this require a timeline rather than a tween, though? I was working under the notion that timelines are for stringing multiple tweens together. As this is jut one animation, I thought the tween (which is the default type of the default gsap export, right?) would suffice.

I am integrating simple gsap animations into my React application. I can trigger a animation.play() fn on onMouseEnter, but the animation.reverse() fn is not working. Here's my set up: const hoverScaleAnimation = ( ref: MutableRefObject<HTMLDivElement | null> ) => { return gsap.to(ref.current, { scale: 1.05 }); }; const onEnter = (ref: MutableRefObject<HTMLDivElement | null>) => { hoverScaleAnimation(ref).play(); }; const onLeave = (ref: MutableRefObject<HTMLDivElement | null>) => { hoverScaleAnimation(ref).reverse(); }; Originally I was just triggering new gsap.to animations in the hover functions, but I thought this would be cleaner/less need to calculate how to scale and de-scale. I am following these react & gsap guidelines from greensock, and tried to use reverse() in line with the recommendations here and here. Code sandbox

Okay I thought I'd resolved the issue - I swear to God it was working a second ago - but now I'm facing the same problem. Please see the code sandbox above for an example of it, apparently, not working. EDIT: It seems to pause the animation if I don't have lagSmoothing added. If I do include it, the animation plays int he background when I change tabs.

EDIT: see below comment I've resolved the issue; it was a React problem rather than a GSAP problem. For anyone coming here in future, here's a working example: https://codesandbox.io/s/keen-dirac-k8d0p?file=/src/App.tsx My problem was that I was calling the gsap animation in useEffect without supplying a dependency array. This meant that useEffect ran anew everytime I entered the page. With the dependency array included, it now only runs when those dependencies change. So lagSmoothing does now successfully pause the animation on switching tabs.

@Visual-Q @GreenSock Thanks for your tips. I've swapped out the timelinelite syntax for the gsap 3 syntax and lagsmoothing is now having some effect. It's still not solving my ultimate goal of animations pausing when switching screens (it merely restarts), but I guess I will start a new thread for that.

I've seen various threads and blog posts about using lagSmoothing() to prevent animations pausing when switching screens. Every time I try to implement solutions, I get either ___ is not a function or not a method, or cannot read property ___ of undefined or something to that effect. Here's the base animation: useEffect(() => { const timeline = new TimelineLite(); timeline.from(itemRef.current, { autoAlpha: 0, stagger: 0.5, }); }); I've tried adding a TweenLite instance, like recommended here and elsewhere useEffect(() => { const timeline = new TimelineLite(); TweenLite.ticker.useRAF(false); TweenLite.lagSmoothing(0); timeline.from(itemRef.current, { autoAlpha: 0, stagger: 0.5, }); }); I've also tried adding the fn directly to my timeline instance: useEffect(() => { const timeline = new TimelineLite(); timeline.lagSmoothing(0); timeline.from(itemRef.current, { autoAlpha: 0, stagger: 0.5, }); }); And have also tried with the updated gsap.timeline() syntax from this Stack OVerflow post. Does anyone have an example of how lagsmoothing should be used with a timeline instance?