0

https://codepen.io/aswinckr/pen/RJvKjq

This is a two part question -

I'm trying to build a continuous infinite loop animation with plain javascript with setInterval and setTimeout methods with applying css properties. When i switch browser tabs and return to this after a while my animations seem to behave very unexpectedly. Why does this happen??

After reading online I understand that requestAnimationFrame is recommended way to do animations using javascript. In my case i'm using JS to trigger transform and scale properties in css with a transition property. Even if i were to use requestAnimationFrame with a ease or bezier function lets say, how would I take care of the setTimeout functionality? Where after animating between first and second cards to repeat the animation from second to third..

The link to codepen is pasted above. Thanks in advance!

Aswin
  • 493
  • 7
  • 14
  • Because the browser wants to save resources.... – epascarello Jul 02 '18 at 19:19
  • Browsers slow interval timers way, way down on inactive browser tabs to save energy and battery etc. – Pointy Jul 02 '18 at 19:19
  • Got it, thanks for pointing me to this. In the example showed he still uses setTimeout. Does that not get affected in the performance optimization? Or is it just setInterval – Aswin Jul 03 '18 at 03:42

0 Answers0