[gsap.reverse() not working on onMouseLeave in React]

@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.

[gsap.reverse() not working on onMouseLeave in React]

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

[Is there an example of how lagSmoothing() should be used with TimelineLite?]

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.

[Is there an example of how lagSmoothing() should be used with TimelineLite?]

15 hours ago, GreenSock said:

Oh, it definitely shouldn't restart - can you please provide a minimal demo so we can see the issue in context? 

 

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.

[Is there an example of how lagSmoothing() should be used with TimelineLite?]

@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.

[Is there an example of how lagSmoothing() should be used with TimelineLite?]

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?