maioman maioman - 9 months ago 35
Javascript Question

storing requestAnimationFrame

Brief explanation:

I've made a requestAnimation which alternatively has 2 callbacks depending on counter;

one of the callbacks will increment counter and the other will decrease it (always looping inside a certain range


Everything works as expected until stopping and restarting the animation,

this is the code that activates and should store the requestAnimationFrame (

function start() {
if (!spiral) {
spiral = window.requestAnimationFrame(animation);

function click() {
if (spiral) {
var trackSpiral = spiral;
spiral = undefined;

} else {

spiral = trackSpiral;
/* (count > precedingCount || count == 0 ) ?
spiral = requestAnimationFrame(animation) :
spiral = requestAnimationFrame(animationReverse);*/
window.addEventListener('load', start)

window.addEventListener('click', click)

As a workaround I've used a
precidingCount var
and depending on whether if it's increasing or not it can decide which requestAnimationFrame callback to fire;


Can somebody explain why just storing and recalling the
assigned to requestAnimation doesn't work as I'd expect?

Is there a better pattern to stop-restart requestAnimation?

here's a working pen (to see the issue comment lines from 180 to 182)_


After each tick, you must re-request the animation frame. requestAnimationFrame is not something like setInterval that you need to cancel.

var animating = false;

function tick() {
    if (!animating) return;
    animate();                          // do one step of animation
    window.requestAnimationFrame(tick); // request next frame

function click() { if (animating = !animating) tick(); }

window.addEventListener('load',  click);
window.addEventListener('click', click);