Search code examples
javascriptcssweb-animations

Why does Web Animation API reverse() cause my animation to jump?

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.

Solution

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