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:

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:

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

$(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

Frau Doudou

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.