cancelAnimationFrame
Summary
Cancels a requestAnimationFrame request
Method of dom/Windowdom/Window
Syntax
window.cancelAnimationFrame(/* see parameter list */);
Parameters
handle
- Data-type
- any
A handle of the animation request to cancel. The handle is the value returned by requestAnimationFrame.
Return Value
No return value
Examples
<!DOCTYPE html>
<html>
<head>
<title>Script-based animation using requestAnimationFrame</title>
<style type="text/css">
div { position: absolute; left: 10px; top:100px; padding: 50px;
background: crimson; color: white }
</style>
</head>
<body>
<div id="animated" style="left: 549.5px;">Hello there.</div>
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>
<script type="text/javascript">
var elm = document.getElementById("animated");
var stopped;
var requestId = 0;
var starttime;
function render(time) {
// set left style to a function of time.
if (!stopped) {
elm.style.left = ((Date.now() - starttime) / 4 % 600) + "px";
requestId = window.requestAnimationFrame(render);
}
}
function start() {
starttime = Date.now();
requestId = window.requestAnimationFrame(render);
stopped = false;
}
function stop() {
if (requestId) {
window.cancelAnimationFrame(requestId);
}
stopped = true;
}
</script>
</body>
</html>
Usage
Script based animations.
Syntax
Standards information
Attributions
Mozilla Developer Network
: [cancelAnimationFrame Article]Microsoft Developer Network: [cancelAnimationFrame Method Article]