0

Docs everywhere say that calling reverse() while animation is playing is the same as setting playbackRate to -1, but my animation jumps like crazy when reverse() is used. playbackRate works fine. I would really like to use reverse() because it is state-independent but I'm afraid I don't understand it.

I have a small example of a rotating square on codesandbox here:

https://codesandbox.io/s/small-browser-1bkdt?file=/src/index.js

Am I doing something wrong or is reverse() not so simple?

UPDATE:

  • It might be a be Codesandbox bug, since this fiddle by @Kaiido works fine.

  • I'm using Firefox 75.0 and MacOS. Chrome seems to work fine.

jlkiri
  • 129
  • 7
  • 2
    It looks find in Chrome for me. Smooth. I don't see any jumping. – Will Apr 28 '20 at 05:10
  • 1
    @will Oh my. I was using Firefox. I checked and it actually works fine in Chrome... – jlkiri Apr 28 '20 at 05:16
  • 1
    Weird... can reproduce sometimes in the codesandbox, but not in [this fiddle](https://jsfiddle.net/tobpf841/) nor in StackSnippets... (FF 75 & 77 on macOs) – Kaiido Apr 28 '20 at 06:50
  • @Kaiido Wow, it indeed works fine in the fiddle you linked to. Perhaps it is some weird Codesandbox bug. – jlkiri Apr 28 '20 at 06:57
  • Yeah, hard to tell with all the dependencies that are being injected. Could also be an FF bug. But do you face it in your own environment? – Kaiido Apr 28 '20 at 07:03
  • @Kaiido So far I am just exploring and playing around with the API so can't tell whether it is going to work properly. – jlkiri Apr 28 '20 at 07:23
  • Looks smooth to me in Firefox, too. Which version are you using, @jlkiri? – D. Pardal Apr 28 '20 at 07:36
  • @D.Pardal 75.0 macOS – jlkiri Apr 28 '20 at 07:46
  • I'm using 76.0b8 on Windows. – D. Pardal Apr 28 '20 at 07:51
  • I noticed that even the fiddle by @Kaiido doesn't work properly in latest Safari though... – jlkiri Apr 28 '20 at 08:16
  • Firefox developer and spec editor here. I can't reproduce on Firefox 77 on Windows. If you can reproduce consistently, would you mind filing a bug at https://bugzilla.mozilla.org? In terms of the spec though, using `reverse()` is definitely correct. On the contrary setting `playbackRate` can cause jumps (while `updatePlaybackRate()` should not). – brianskold Apr 29 '20 at 02:38
  • 1
    @brianskold Thank you for checking. I was told by codesandbox team that disabling "Infinite Loop Protection" in sandbox.config.js might help. Doing that and forking the project helped me both on 75, 76 and 77. So, I don't think this is a Firefox bug. – jlkiri Apr 30 '20 at 03:19

1 Answers1

1

As is clear from this codesandbox issue, jumpy behaviour can be solved with disabling "Infinite loop protection" in sandbox.config.json. I also had to fork the project before it started to work perfectly fine. This is likely not a problem with Firefox.

jlkiri
  • 129
  • 7