What DOM animation technique should you use?
window.requestAnimationFrame, and CSS animations/transitions.
- Can it actually do what I want to do?
- How well does this technique perform? (Does it slow down the browser/computer?)
- How accurate does my timing need to be?
- Does it work in all the browsers that I want my webpage to work in?
<canvas>tag, you have to call functions like
fillRect(), you can't use CSS. You would need to use
setIntervalto call those functions periodicially instead. In fact, that's what we do here on Khan Academy, in our ProcessingJS environment. ProcessingJS is a JS library that writes out to a
<canvas>tag, and if you define a
draw()function in your code, then ProcessingJS uses
setIntervalto call that
draw()function repeatedly based on the
setInterval, and it doesn't matter that the timing isn't accurate, because you're only calling it every minute or so. That's what we do on Khan Academy on the help requests page, to continuously check for new help requests every 2 minutes.
requestAnimationFrameor CSS animations. You need to use a combination of techniques that work across the browsers, or find a library that does that for you, like Velocity.js.