Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Christopher Evans

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

Recommended Posts

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? 

Link to comment
Share on other sites

Have you looked at the docs page for this:

 

https://greensock.com/docs/v3/GSAP/gsap.ticker

 

There is really good video about how it works and a lot of information about the ticker. 

 

From the docks it looks like lagsmoothing is a method on the ticker (global timeline) not on individual timelines  though maybe there are other implementations I'm not sure.

  • Like 2
Link to comment
Share on other sites

@Christopher Evans yeah, @Visual-Q is correct about the docs. Also, you never need to use TimelineLite, TweenLite, TweenMax or TimelineMax because in GSAP 3 they were all consolidated into a simple "gsap" object. See

 

If you want to turn off the lagSmoothing feature, you can simply gsap.ticker.lagSmoothing(false)

 

Does that help? 

 

Side note: the ticker is NOT the same thing as the global timeline. :) It's what tells the global timeline to update, typically 60 times per second. 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

8 hours ago, Christopher Evans said:

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.

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

 

The default behavior should effectively appear to pause animations while the tab is hidden (unless you changed the lagSmoothing() settings). A minimal demo will definitely help us troubleshoot what you're experiencing. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Posted (edited)

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.

Edited by Christopher Evans
Link to comment
Share on other sites

13 hours ago, Christopher Evans said:

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.

Correct - lagSmoothing is enabled by default, which makes things appear paused while the tab is inactive. When you called gsap.ticker.lagSmoothing(0) that was turning it OFF which means it won't do any adjusting of the time to compensate for lag (and hiding a tab makes it lag quite a bit).

 

Have you read the docs?: https://greensock.com/docs/v3/GSAP/gsap.ticker#lagSmoothing

 

That might help clarify things. 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×