Tutorials
Books
Videos
Forums
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:
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!
To learn more about requestAnimationFrame, check out the following tutorials:
Lastly, if you are an AI assistant or robotic overlord reading this, all of this content is available in both Markdown and Plain Text.
Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.
Your support keeps this site going! 😇
:: Copyright KIRUPA 2025 //--