Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<meta charset="utf-8">
<title>AnimationTiming Test: cancelAnimationFrame used to cancel request callback</title>
<style>
#animated {
background: blue;
color: white;
height: 100px;
width: 100px;
position: absolute;
}
</style>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which moves from left to right repeatly, when click the 'stop' button,
the square stops.
</p>
<button onclick="stop()">stop</button>
<div id="animated">Filler Text</div>
<script>
let requestId = 0;
let requestAnimation = window.requestAnimationFrame;
let cancelAnimation = window.cancelAnimationFrame;
function animate(time) {
let div = document.getElementById("animated");
div.style.left = (time - animationStartTime) % 2000 / 4 + "px";
requestId = requestAnimation(animate);
}
function start() {
animationStartTime = window.performance.now();
requestId = requestAnimation(animate);
}
function stop() {
if (requestId) {
cancelAnimation(requestId);
requestId = 0;
}
}
start();
</script>