Animation Loops using requestAnimationFrame
by kirupa (https://www.kirupa.com/me/index.htm) | 15 August 2013
In this short video, I continue my unhealthy obsession with the requestAnimationFrame function by summarizing what it does and the role it plays in animation loops.
Hit Play below to get the video rolling:
Example + Source Code
The example I show in the video is of the following sliding circle (https://www.kirupa.com/snippets/examples/sliding_circle.htm). The full source for it looks as follows:
Something, something, sliding thing!
What you see in the video is me starting from an earlier version of this code and adding the relevant parts to setup our animation loop and get the animation rolling!
Going Further
To learn more about requestAnimationFrame, check out the following tutorials:
- Animating with requestAnimationFrame (https://www.kirupa.com/html5/animating_with_requestAnimationFrame.htm)
- Animating in Code Using JavaScript (https://www.kirupa.com/html5/animating_in_code_using_javascript.htm)
- Animating Many Things On a Canvas (https://www.kirupa.com/html5/animating_many_things_on_a_canvas.htm)
- Animating Movement Smoothly using CSS (https://www.kirupa.com/html5/animating_movement_smoothly_using_css.htm)
