As a game-developer, I work with sprites frequently. Sometimes content is represented using some animation – e.g. a sprite-mask that opens a hidden card – and in this case I’d rather rely on a JS-solution than on a CSS3-animation due to browser compatibility. To be exact, I use the Motio Sprite Plugin.
I tried various plugins, but stayed with Spritely and now Motio, trying to comply with these requirements:
- lightweight plugin
- supporting IE7 and IE8
- sprite-mode and sprite-mask-mode
- timed starting and stopping
I first used Spritely, but switched to Motio, mainly because sprite masks sometimes stopped and did not continue to the last frame in older IEs. It felt like a good decision – problem solved, as further advantage the source code is smaller and better readable.
Setup
Motio does not require jQuery, though I used jQuery in these examples.
When attaching a Motio object to some DIV, you pass an object of properties: frames – the total number of frames and fps – frames per second. When using Motio as a jQuery plugin, the animation starts right away, you might want to add startPaused.
$asset is the animated DIV, just add a selector to your taste.
$(function() {
var $asset = $(".fraudoudou-animation");
$asset.motio({frames: 20, fps: 4});
});
See the Pen Easy Sprite Animation by Frau Doudou (@fraudoudou) on CodePen.
For playing the sprite, we have different possibilities:
- Use “play” to play the animation in a loop over and over again until you stop it
- Use “toEnd” to play until the last frame and stop
- Use “to” in order to define a different frame to stop
For resetting the animation, call “destroy”. Not too complicated, hm?
Three useful snippets
These examples use jQuery, but Motio does not require it. If you want use vanilla JS, you’ll need to adjust the syntax.
» Play to last frame:
$(function() {
var $asset = $(".fraudoudou-animation");
var onAnimationEnd = function() {
};
$asset.motio({frames: 20, fps: 4, startPaused: true});
$asset.motio("toEnd", onAnimationEnd);
});
See the Pen Sprite Animation to Last Frame by Frau Doudou (@fraudoudou) on CodePen.
» Play, wait, play again:
$(function() {
var $asset = $(".fraudoudou-animation"),
initialBackgroundPosition,
updateTimeout,
minTimeout = 700,
maxTimeout = 8000;
var play = function() {
clearTimeout(updateTimeout);
$asset.motio("toEnd", onAnimationEnd);
};
var randomBetween = function(from, to) {
return Math.floor(Math.random()*(to-from+1)+from);
};
var waitAndPlay = function() {
updateTimeout = setTimeout(play, randomBetween(minTimeout, maxTimeout));
};
var onAnimationEnd = function() {
$asset.css("background-position", initialBackgroundPosition);
waitAndPlay();
};
$asset.motio({frames:20, fps:4, startPaused: true});
initialBackgroundPosition = $asset.css("background-position") || "0% 0%";
waitAndPlay();
});
See the Pen Sprite Animation Random Restarting by Frau Doudou (@fraudoudou) on CodePen.
» Play once, then loop between frameX and last
- Play once using “toEnd”
- Then jump right to the desired start frame, setting immediate to true
- And play from the new start frame to the last frame
- In the event handler we access the Motio object with this (therefore no jQuery syntax!)
- In the example below we play once from first (index: 0) to last frame and then loop between second (index: 1) and last-frame
$(function() {
var $asset = $(".fraudoudou-animation");
//on animation end restart from frame 7
var onAnimationEnd = function(evt) {
this.to(7, true);
this.toEnd(false, onAnimationEnd);
};
$asset
.motio({frames: 20, fps: 4})
.motio("toEnd", onAnimationEnd);
});
See the Pen Sprite Animation with custom loop by Frau Doudou (@fraudoudou) on CodePen.
Further readings
- Plugin jAnimated Sprite (have not tried it though)
- Plugin jQuery Sprite (also not tried)
- Responsive Slides: One external library I use here on my blog. I think, it handles CSS3 animations with JS fallback in a savvy way.

Frau Doudou is a web developer living in Munich. She loves working on creative solutions for sneaky web-problems – challenge accepted!
Feel free to ask questions and contact her on Twitter.