Let's say I have a complex HTML component that I want to animate, but every time it needs to be animated, several things need to be done, such as rendering new HTML components, setting height, attaching css classes, etc....

This could cause the animation not being smooth if the animation gets triggered in the middle of browser reflow/repaint. I could potentially use setTmeout to delay the animation, but how long it should wait is not clear.

Is there any bullet-proof way to wait for all these browser rendering work to be done?

Let's say I have a complex HTML component that I want to animate, but every time it needs to be animated, several things need to be done, such as rendering new HTML components, setting height, attaching css classes, etc....

This could cause the animation not being smooth if the animation gets triggered in the middle of browser reflow/repaint. I could potentially use setTmeout to delay the animation, but how long it should wait is not clear.

Is there any bullet-proof way to wait for all these browser rendering work to be done?

• javascript
• html
• css

• Are you using Netscape 0.4, otherwise a reflow is so fast that you can't really time your animations to happen between reflows, and there's no way to wait for a reflow, it happens instantaneously. Maybe you were really thinking of how to wait for the window to load or something like that ? – adeneo Commented Apr 23, 2014 at 19:57
• When adding new HTML components, keep in mind it's possible to set them up, with inner HTML and CSS, before you add them to the original DOM. Generally though, my opinion is that this won't often be as noticeable an issue as you think. – Katana314 Commented Apr 23, 2014 at 20:01
• If your animation changes layout, a reflow is fired for each frame of the animation. – Fabrício Matté Commented Apr 23, 2014 at 20:02

1 Answer 1

Use window.requestAnimationFrame() (https://developer.mozilla.org/en/docs/Web/API/window.requestAnimationFrame) - you use it in essentially the same way you would use setTimeout, but you don't specify the delay - the browser deals with it for you.

Article about it from Paul Irish here: http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

Eg:

stepAnimation = function () {
  // Do something to move to the next frame of the animation
  // then
  step()
}

step = function () {
  window.requestAnimationFrame(stepAnimation)
}

step()