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