requestAnimationFrame : How To Add Arguments? A simple guide!

Usually, the need to add arguments to requestAnimationFrame comes about when you need to perform the exact same animation. But only on different elements (and maybe with different parameters, for example speed etc.)

So, to begin with, let’s look at a working example.

A Working Example

Below there are 3 gears. All of them are rotating. So, it’s the same animation. But, I want them to rotate at different speeds.

This is the kind of case where you need to pass parameters to requestAnimationFrame in order to run a function that rotates a particular gear at a particular speed.

See the Pen
requestAnimationFrame Add Arguments by Khoj Badami (@livefiredev)
on CodePen.

A Look At The Code

The code below is heavily commented so that all the important parts made sense..

// Create a variable to keep track of current state
let state = {
    cog_1: 0,
    cog_2: 0,
    cog_3: 0
}

// This is the function that does the actual rotation
// But the function takes, as arguments, the Image Id to rotate
// and the speed of rotation required.
let rotateCog = (cogId, speed) => {
    let currentAngle = state[cogId];
    let newAngle = currentAngle + speed;
    state[cogId] = newAngle;
    let theCogImg = document.getElementById(cogId);
    theCogImg.style.transform = `rotate(${newAngle}deg)`;

    // When calling requestAnimationFrame again,
    // you can pass in the arguments from this function
    // in order to call it for the next time.
    requestAnimationFrame(function() {
        rotateCog(cogId, speed)
    })
}

// Calling requestAnimationFrame where the argument is
// a function that calls the rotateCog function with the
// Parameters needed to rotate the first gear.
requestAnimationFrame(function() {
        rotateCog('cog_1', 5)
})

// Calling requestAnimationFrame where the argument is
// a function that calls the rotateCog function with the
// Parameters needed to rotate the second gear.
requestAnimationFrame(function() {
        rotateCog('cog_2', 0.5)
})

// Calling requestAnimationFrame where the parameter is
// a function that calls the rotateCog function with the
// Parameters needed to rotate the third gear.
requestAnimationFrame(function() {
        rotateCog('cog_3', 3)
})

The Trick That Makes It All Work

Basically, requestAnimationFrame takes as its first argument: a function that needs to be called.

But the issue is that, we cannot pass any arguments to that function.

So, to solve the problem, we pass an “anonymous function” with 0 arguments which has only one line. That line is calling another function that has as many arguments as you want.

In case you are not sure what an anonymous function is: It’s just a function without a name. It’s usually passed to another function as a parameter. A good explanation of anonymous functions can be found here.

A more elaborate, but clear way to see this is as follows:

let functionWithZeroParams = () => {
    functionWithManyParamters(argument_1. argument_2, argument_3)
}

requestAnimationFrame(functionWithZeroParams)

BTW: If you need to learn more about how to pause / kill / stop an animation using requestAnimationFrame, check out this article I have written on the subject.

Hope this helps!