title: When to use requestAnimationFrame?
body: <p>Having discovered <code>requestAnimationFrame</code> just a moment ago, I have dived into all the information I could find about it. To name just a few of the resources I came across in case there are others looking for more info about it:</p>
  
  <ul>
  <li><a href="http://creativejs.com/resources/requestanimationframe/">http://creativejs.com/resources/requestanimationframe/</a> - explains the basics about it.</li>
  <li><a href="http://www.html5rocks.com/en/tutorials/speed/animations/">http://www.html5rocks.com/en/tutorials/speed/animations/</a> - explains how to use it.</li>
  </ul>
  
  <p>Anyway, all of these resources tell me something about how <code>requestAnimationFrame</code> works or how it could/should be used, but none of them tell me when it is right to use it.</p>
  
  <ul>
  <li>Should I use it for animations (repeated changes to the style of an element, much like CSS animations)?</li>
  <li>Should I use it when an automated event wants to change the css/classes of one or multiple elements?</li>
  <li>Should I use it when an automated event wants to change the text value of one or multiple elements? (e.g. updating the value of a clock once every second)</li>
  <li>Should I use it when an automated event wants to modify the DOM?</li>
  <li>Should I use it when an automated event needs values like .offsetTop, .offsetLeft and then wants to change styles such as top and left a few lines further?</li>
  <li>Should I use it when a user generated event causes any of the above changes?</li>
  </ul>
  
  <p><strong>TL;DR:</strong> When is it right to use requestAnimationFrame?</p>