Javascript Sprite Sheet Animator

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"
  src="/assets/logo.png"
  height="163"
  width="141"
  data-rollover="true"
  data-animate="true"
  data-autostart="true"
  data-json="/assets/logo-animation.json"
>

Source code

The source code is available at: jankeesvw.github.com/sprite-sheet-animator.js

Hello, I'm Jankees van Woezik

Like this post? Follow me at @jankeesvw on Twitter