YOUR GUIDE TO

Animation on the Canvas with JavaScript

With loop, rewind, series, sequence, easing, paths, and more!

Welcome readers from ◎ Your Guide to Coding Creativity on the Canvas

Image for post
ZIM Beads animated on path with depth zoom, speed and shading

Animation can be done at several levels on the Canvas. You can manually change properties in a time, for instance, with a Ticker which runs at the framerate and updates the stage. Usually, we use an animation or tween engine to easily apply easing equations, handle rewind, loop and dozens of various options. This guide will take you through both but concentrate on the engine.

We will be using the ZIM JavaScript Canvas Framework. For more options see ◎ Your Guide to Selecting a JavaScript Canvas Library or Framework.

Changing Properties in Time to Animate

In HTML 5 we have been given a new way to handle time for animation. This is the requestAnimationFrame which runs at the refresh rate of the monitor to provide smooth animation. In ZIM, we have wrapped this function in a Ticker class so that we can queue stage updates. You can add functions to the Ticker queue and only one update will be done at the end. ZIM also uses the same queue internally for dragging, animating and other features.

You are welcome to code along with us using this Online Editor. Copy or type this and press TEST. For more information about the Circle, see ◎ Your Guide to Coding Concepts with the Colorful Canvas and about the arrow function, see ◎ Your Guide to Components on the Canvas with JavaScript.

const circle = new Circle().center();Ticker.add(()=>{
circle.x += 2; // add 2 to the current x position
});
// or circle.mov(2);
Image for post
Circle animating to right using a ZIM Ticker
Animation 1 video :: see on YouTube for chapters.

Animation and Tween Engines for the Canvas

Animation has what is called a Tween. This stands for in-between and is a classical animation term for when a more junior animator would fill in drawings between keyframes. So an Animation engine is also called a Tween engine. These run equations, made famous by Robert Penner, to handle different easing such as linear, quad, sine, elastic, bounce, back, etc. These also have in and out settings.

The leading Web tween engine is GreenSock. GSAP was popular even back in Flash times as an alternative to the built-in Flash animations. GSAP was adjusted to work with HTML 5 DOM and it works on the canvas as well. Really, most of tweening is running platform-independent equations to set properties. GSAP uses chaining on the Tween object. CreateJS has TweenJS as part of its library for the canvas and this runs the equations as well with chaining. TweenJS has been run billions of times. See ◎ Your Guide to Conveniences when Coding on the Canvas for more information on chaining.

Image for post
Animation basics in ZIM press check boxes to pause :: select to see code at right
Animation 2 video :: see on YouTube for chapters

ZIM animate() uses TweenJS as a base and has tripled the features to rival and in cases surpass GSAP. ZIM animate() has removed chaining to the Tween object so that we can chain to the object being animated like most of the other ZIM methods. We do not need to chain to a Tween object as handling many options is easy with the ZIM DUO technique of the additional configuration object option. Let’s demonstrate!

// TweenJS (GSAP would be similar)const circle = new Circle().center();
createjs.Tween
.get(circle)
.to({x:1000}, 1000)
.call(removeTicker);
const ticker = createjs.Ticker.on("tick", stage);
function removeTicker() {
createjs.Ticker.off("tick",ticker);
}
// ZIM animate()new Circle().center().animate({x:1000});

ZIM Animate Comparison

ZIM animate() is less code than raw CreateJS as it automatically handles the Ticker. Even without the Ticker code, ZIM animate is less code and we can chain it onto the object. We have also compared ZIM code to GSAP code. Here is an example with ZIM Animate at Half the Size of GSAP. ZIM has also come in consistently at 30% to 50% less animation code than CSS and considerably more readable.

Image for post
ZIM and GSAP animation comparison with ZIM at half size
Image for post
Parameter for ZIM animate() from the ZIM Docs

Rewind and Loop

Here is how you can rewind and loop. We use the ZIM DUO config object to the further-on parameters.

// REWIND AND LOOPnew Circle().center().animate({
props:{scale:3, color:red},
time:2,
rewind:true,
loop:true
});
Image for post
Rewind and loop

Sequence, Series and Call

Here is animating each child of a container as a sequence (one after the other) and then calling a function when it is done to twirl the tile. We can call a function when the animation rewinds, loops, waits, does a sequence and ends. ZIM animate also has a series which lets you animate things or properties one after another.

// SEQUENCEconst tile = new Tile()
.alp(.5)
.centerReg()
.animate({
props:{scale:1.5},
time:.4,
rewind:true,
sequence:.2,
call:()=>{
tile.animate({rotation:360});
}
});
Image for post
Animating with a sequence and using a call function when done

Please see this Animation Basics Demonstration Page or the ZIM Tips on Animate including how to skip your animations with the ANIMATE constant. See the ZIM Docs for all options. You can animate from values, set values, change the rate of animation, pause and stop animations based on ids, wait to start animations, animate based on relative numbers, animate properties of any object with the animate function and more!

Advanced Animations on the Canvas

In ZIM NIO (version 9) animation on a path and dragging on a path was introduced as shown in this Demonstration Site. This is particularity powerful as ZIM provides the user with editable paths with Squiggle and Blob.

Image for post
ZIM NIO :: animation on path demo site

Objects can orient along a path (or to any specified direction), flip, be dragged, have their speed controlled. The paths are editable as shown in the DRAG example. The paths can also be made not editable or hidden. Here is the rough code:

// PATHconst path = new Squiggle().center();
new Circle().addTo().animate({
props:{path},
drag:true
});
Image for post
ZIM NIO :: drag along editable path example

In the EXTRA example, we demonstrate how the object can appear to animate in 3D. As the object goes lower on the screen it zooms bigger, gets brighter and moves faster. We can also animate the depth so it goes from behind to in front of other objects! These are just handy examples of how ZIM animate can

animate properties based on other properties

and these other properties may themselves be animating! Wow!

Image for post
ZIM NIO :: animating depth with zoom, level, speed, fade

Animating Shapes

The cloud in the example above is actually moving. Here are examples of animating the points of a Blob() and Squiggle(). Animations can be used for light shows in night clubs or on bands. We are also animating to sound using ZIM SoundWave which we feature in ◎ Your Guide to Controling the Canvas with JavaScript.

Image for post
ZIM animate of Blobs

Blobs and squiggles can also be animated to other blobs and squiggles with the shape property in animate. These are called Shape Tweens. So something like this:

const target = new Blob({points:"circle"});
new Blob({points:"rectangle"}).center().animate({
props:{shape:target},
rewind:true,
loop:true
});
Image for post
Shape tween with ZIM animate :: can use parameters to hide control points

Wiggling Animation on the Canvas

Unfortunately, CreateJS does not use dynamic parameters like ZIM VEE. See ◎ Your Guide to Conveniences when Coding on the Canvas for more info. This means that once an animation is set, there is no way to change target properties each loop or rewind. We eventually hacked this and now have a loopPick parameter for using ZIM VEE values as animation properties. But to solve the problem initially we made ZIM wiggle().

Type and TEST this:

// WIGGLE
// normally, we would just put in the parameter values
// but for the article we want to describe them anyway
// so we used the ZIM DUO config object
new Rectangle()
.sca(3)
.centerReg()
.wiggle({
property:"rotation",
baseAmount:0,
minAmount:5,
maxAmount:10,
minTime:.2,
maxTime:.5
});
Image for post
ZIM wiggle() to randomly animate within a range

Wiggle is handy for moving things around randomly on the stage or animating any property randomly within a range.

Dr Abstract remembers Adobe AfterEffects having wiggle where Flash (Animate) did not. He always wanted a wiggle… now he has one!

CONCLUSION

Animation is such a fun topic. The static images of this article do not quite give justice to the examples. You can find animation in almost every example on the ZIM Examples page so have a look! We blast through a bunch of them on the latest YouTube promo video — see if you recognize any — there is animating blobs, wiggles, animations on paths, and animated interfaces!

ZIM promo video with lots of animation examples on the canvas!

Further reading

To animate with Sprites please see ◎ Your Guide to Images, Sounds and Sprites on the Canvas. Animation is also involved in many of the controls like Emitter, Scroller, Dynamo, Accelerator described in ◎ Your Guide to Controlling the Canvas with JavaScript.

If you would like to see what coding in general is like on a Canvas Library or Framework here is ◎ Your Guide to Coding Creativity on the Canvas.

We hope you are enjoying the guides and if this is your first, please check out the other guide articles. Cheers!

Dr Abstract

Image for post

Follow us on Twitter at ZIM Learn and here is ZIM Learn on YouTube!

Written by

Inventor, Founder of ZIM JavaScript Canvas Framework and Nodism, Professor of Interactive Media at Sheridan, Canadian New Media Awards Programmer and Educator