nidnogg

32 minutes ago, OSUblake said:

How about this?

https://codesandbox.io/s/react-spinning-timescale-demo-qrg6n

 

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?

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