Restarting logic causes slow animations to be stuck forever

[jstcki]

Sometimes animations with a low frame rate seem to get stuck forever, jumping back and forth. Here's a demo case: http://bl.ocks.org/herrstucki/cf4978db089df7b25262

I traced it to this bit of code:

// more than 10 frames? prolly switched browser tab. Restart
if (this.accumulatedTime > msPerFrame * 10) {
  this.accumulatedTime = 0;
}

https://github.com/chenglou/react-motion/blob/master/src/TransitionMotion.js#L368-L371

When I remove it, the problem goes away. I'm not too familiar with the RM code, so I can't really say if this is an essential piece. In any case, the 10 frames heuristic seems a bit too strict (I know that 6 FPS isn't really acceptable but you don't always know the performance of the user's machine). And shouldn't the animation just resume or skip to the end instead?

[chenglou]

The discussion was here. Would increasing that limit work out for you? Say, to 15?

[jstcki]

I don't think arbitrarily changing the limit helps. The solution may be to instead of resetting accumulatedTime to 0 (and thus triggering this.startAnimationIfNecessary()) to cap it to msPerFrame * 10. So:

// more than 10 frames? prolly switched browser tab. Restart
if (this.accumulatedTime > msPerFrame * 10) {
  this.accumulatedTime = msPerFrame * 10;
}

But it's been a while since I reported this 😄 . I'd have to test that assumption first.