Animation Loops using requestAnimationFrame

by kirupa   |   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. The full source for it looks as follows:

<!DOCTYPE html>
<html>
 
<head>
<meta charset="utf-8">
<meta content="stuff, to, help, search, engines, not" name="keywords">
<meta content="What this page is about." name="description">
<meta content="An Interesting Title Goes Here" name="title">
<title>Something, something, sliding thing!</title>
<style type="text/css">
body {
	background-color: #FFF;
	margin: 30px;
	margin-top: 10px;
}
#contentContainer {
	width: 550px;
	height: 350px;
	border: 5px black solid;
	overflow: hidden;
	background-color: #FFFF00;
}
#thing {
	position: relative;
	left: 50px;
	top: 25px;
}
</style>
</head>

<body>
<div id="contentContainer">
	<img id="thing" alt="the thing" height="300" src="../../html5/images/donut.png" width="300">
</div>

<script src="//www.kirupa.com/html5/examples/js/prefixfree.min.js"></script>
<script>
var theThing = document.querySelector("#thing");
var currentPos = 0;

// depending on your browser, the right version of the rAF function will be returned...I hope
var requestAnimationFrame = window.requestAnimationFrame || 
							window.mozRequestAnimationFrame || 
							window.webkitRequestAnimationFrame || 
							window.msRequestAnimationFrame;
 
function moveThing() {
	currentPos += 5;
	
	theThing.style.left = currentPos + "px";
	
	if (Math.abs(currentPos) >= 900) {
		currentPos = -500;
	}
	
    requestAnimationFrame(moveThing);
}
moveThing();

</script>
</body>
</html>

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:

If you have a question about this or any other topic, the easiest thing is to drop by our forums where a bunch of the friendliest people you'll ever run into will be happy to help you out!

THE KIRUPA NEWSLETTER

Get cool tips, tricks, selfies, and more...personally hand-delivered to your inbox!

( View past issues for an idea of what you've been missing out on all this time! )

WHAT DO YOU THINK?

blog comments powered by Disqus

NEWSLETTER

No spam. No fluff. Just awesome content sent straight to your inbox!

Awesome and high-performance web hosting!
BACK TO TOP
new books - yay!!!