Writing on the principles & practice of building digital products

Multipliers in Javascript animation

Multipliers dictate how many times an animation happens in a given loop. They're a great way of creating convincing, characterful movement.

I'll preface this by saying that for the record, I am not an animator. The techniques our guys use to weave their magic are largely a mystery to me. Yet from time to time an interactive project requires a deeper dive into the ins and outs of animation. Robo-boogie, our robot dancing game for Code Club, was just such a project.

Whilst building the app I learned a good deal not only about animating with Javascript, but also the animation concept of multipliers. It was a new idea to me and has been helpful in understanding how things move, so I thought I'd try elucidate it as best I can. So without further ado, let's dive in.

What are multipliers?

A multiplier changes how many times an animation happens in a given loop. This simple adjustment opens up a whole world of options. Try changing the inputs below and you'll see what I mean.

By changing the multiplier values above, you change how may times each element's animation cycle happens in a single draw loop. So a value of 0.5 dictates it takes 2 loops for the animation to complete. Or a value of 3.0 would dictate the animation run 3 times in one loop.

As you can see, multipliers allow you to create movement you wouldn't have thought possible from such simple changes. The juxtaposition of two different types of movement (i.e. slow neck, fast head) is a great way of creating a sense of character. And more than that it's just great fun to muck around with. Start playing with the dropdowns and sliders above. You'll be hooked.

If you'd like to take a look under the hood or understand more about how the mechanics of the animation work, the source code for this (along with the rest of this site) is available on Github.

Thanks

Understanding multipliers was invaluable when building Robo-boogie. Heartfelt thanks go to Tom Judd whose patience in explaining the concept to my code brain knew no limits. Similar thanks go to Billy Lamberta Foundation for his indespensible Foundation HTML5 Animation with JavaScript, without which I'd still be trying to draw a circle as we speak. If you're at all interested in HTML5 animation, it's essential reading.

Links