Frontend development made with love

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.

Sprite Animations

Setup

Three useful snippets

» Play to last frame:

» Play, wait, play again:

» Play once, then loop between frameX and last

Further readings