Jump to content
Search Community

Trouble using timeScale tweening with React Hooks

nidnogg test
Moderator Tag

Recommended Posts

I've recently found a very nice codepen containing almost the exact same animation I wanted done in GSAP, and I've been trying to convert it to GSAP 3 to use it in a web app using pretty much just react hooks all over. It uses timeScale tweening to simulate acceleration and deceleration of a rotating svg, with a play/pause button.
However, I can't seem to get the acceleration/deceleration effect to work on Firefox/Chrome, and it won't pause, either.
The codepen I linked is the effect I'm trying to achieve, and I've linked a minimal reproducible example below:
https://codesandbox.io/s/blissful-hill-boo2n
There is just one condition that I'd like to include for my app besides using hooks and gsap 3, and that is that I need to fade the rotation in and out based on the state of the parent element, and as far as I can see that's working alright (as evidenced by the isActive! isNotActive! console logs). That state is currently set by the playButton element, via the setActiveCallback function. I'm not sure this is what's breaking everything, since the animation itself doesn't look like it's working properly on it's own with either react hooks or gsap 3.

TL;DR: I can't get codesandbox the animation to pause, and the intended acceleration/deceleration effect is borked. Any help will be very much appreciated!

 

See the Pen GpXGMd by MAW (@MAW) on CodePen

Link to comment
Share on other sites

32 minutes ago, OSUblake said:

Hell yeah! Thanks for the ultra fast (and spot on!) response.
I hope you don't mind me asking, as I don't want to just straight paste your code and I'd love to understand it better:

  • What is the overwrite parameter used for? I couldn't see any changes after setting it to false. (line 29 spinningWheel.js)
  • Is the (!rotation.current) (line 14 spinningWheel.js) check the solution for the animation not pausing? As in, every time I was pausing before, I was actually starting a new animation?
  • Why does a change like this break timeScale?
  • Like 1
Link to comment
Share on other sites

2 hours ago, nidnogg said:

What is the overwrite parameter used for? I couldn't see any changes after setting it to false. (line 29 spinningWheel.js)

 

It kills any animations that might be animating the rotation.current animation. I did that to make sure the callbacks won't fire if you quickly click the play/pause button. From the docs.

 

Quote

If true, all tweens of the same targets will be killed immediately regardless of what properties they affect. If "auto", when the tween renders for the first time it hunt down any conflicts in active animations (animating the same properties of the same targets) and kill only those parts of the other tweens. Non-conflicting parts remain intact. If false, no overwriting strategies will be employed. Default: false.

 

 

2 hours ago, nidnogg said:

Is the (!rotation.current) (line 14 spinningWheel.js) check the solution for the animation not pausing?

 

(!rotation.current) just check to see if an animation has already been created. Basically the same as doing (rotation.current != null).

 

2 hours ago, nidnogg said:

As in, every time I was pausing before, I was actually starting a new animation?

 

Right.

 

2 hours ago, nidnogg said:

Why does a change like this break timeScale?

 

I honestly don't know. 🤷‍♂️ It seemed to work like 25% of time before putting it inside the onStart callback. Maybe @GreenSock can shed some light on that. I would have expected it to behave just like the codepen demo you posted.

 

 

  • Like 2
Link to comment
Share on other sites

1 hour ago, OSUblake said:

 

3 hours ago, nidnogg said:

Why does a change like this break timeScale?

I honestly don't know. 🤷‍♂️ It seemed to work like 25% of time before putting it inside the onStart callback. Maybe @GreenSock can shed some light on that. I would have expected it to behave just like the codepen demo you posted.

That's a special case where there's some internal logic to sense if timeScale is exactly 0 when someone unpauses an animation and if so, it makes it 1 (normal speed). Otherwise it seemed pretty unintuitive, like someone says "play my animation"...and it doesn't play at all because timeScale is 0! See what I mean? 

 

There are a bunch of ways to work around it in your example. Here are a couple...

  1. You could tween timeScale to 0.001 instead of 0.
  2. If the current timeScale() is 0, just change it to something very small before calling play() like: 
    if (!tl.timeScale()) {
      tl.timeScale(0.001);
    }
    tl.play();

    Or a more concise way: 

    tl.timeScale(tl.timeScale() || 0.001).play();

 

There are a few other ways too, but I don't want to overwhelm you :)

 

Does that clear things up? 

  • Like 3
Link to comment
Share on other sites

11 minutes ago, GreenSock said:

Otherwise it seemed pretty unintuitive, like someone says "play my animation"...and it doesn't play at all because timeScale is 0! See what I mean? 

 

Hm. Setting the timeScale to 1 seems pretty unintuitive to me. Has this been a common problem in the past, with people trying to play an animation with a timeScale of 0? Not saying you should change it. I just wasn't expecting it to behave like that.

 

But now that I know, I like the first solution.

 

19 minutes ago, GreenSock said:

You could tween timeScale to 0.001 instead of 0.

 

 

  • Like 1
Link to comment
Share on other sites

I wouldn't say it's "common" either way. It's one of those dilemmas - EITHER option can be considered "unintuitive". If someone calls play() and the animation doesn't play, the seems unintuitive. If they set timeScale to 0 and then play() makes it go to 1, that could seem unintuitive. Damned if I do, damned if I don't :)

 

Perhaps we can keep an eye on it and if this becomes a stumbling point for many people, we could alter the behavior. I'm reluctant to do so based on one case like this though. 

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.
×
×
  • Create New...