Javascript Sprite Sheet Animator

24 February 2013

About a year ago I wrote a simple animation script for the Twelve Twenty website. Our website contained a lot of small animations, for older devices we wanted to have a fallback. That’s why I decided to make a jQuery script that replaces regular images with canvas animations.

Last week somebody asked me how I created those animations. That’s why I’m publishing the script I wrote.

How to use it

To add such animations to your site you add a regular image tag with some special attributes. If the browser has canvas support the script replaces those images with a canvas object.

This is how you add an animation:

<img alt="Twelve Twenty logo"

Source code

The source code is available at:

Jankees van Woezik profile picture

Hello, I'm Jankees van Woezik

Like this post? Follow me at @jankeesvw on Twitter