Motio

Small JavaScript library for sprite based animations and panning

Download latest stable

loading

Production 3 KB Development 12 KB Repository loading

Introduction

Motio is a small JavaScript library for simple but powerful sprite based animations and panning.

It takes an element, and changes the background position to create an animation effect.

Dependencies

Motio has no dependencies, but there is an optional Motio jQuery plugin version available.

Compatibility

Works everywhere.

Changelog

Motio upholds the Semantic Versioning Specification.

Support

Reward the developer

And make him happy for maintaining this library! :)

I don't want to go the Isotope & family route and monetize my libraries. I want them to be accessible to everyone for any use case and any budget. That being said, free software isn't free, it's just paid by with developer's time, and right now I could use some help :)

jQuery plugin

If you consider jQuery to be a separate language and are not interested in learning JavaScript, you can use the jQuery plugin version of Motio:

Working with Motio via a jQuery proxy has some limitations. You can't access Motio properties and receive values returned by methods, which takes away a lot of control. But if all you want is to trigger a background panning on an element and forget about it, jQuery proxy is the simplest way how to do it.

Performance

Motio is chained to the requestAnimationFrame (with a polyfill for older browsers) and optimized for speed and garbage collection. What Motio does, cannot be done faster.

That being said, animating the element background is not the fastest possible way how to do this kind of animations (canvas solutions are faster), but it is sure as hell the most simple one, and compatible with everything from IE6 and up.

Examples

Move cursor over the example to control the panning direction and speed.

var $example = $('#panning .example');
var frame = $example.find('.frame')[0];
var offset = $example.offset();
var motio = new Motio(frame, {
	fps: 30,
	bgWidth: 1024,
	bgHeight: 1024
});

// Play/Pause when mouse enters/leaves the frame
$example.on('mouseenter mouseleave', function (event) {
	if (event.type === 'mouseenter') {
		motio.play();
	} else {
		motio.pause();
	}
});

// Update the animation speed & direction based on a cursor position
$example.on('mousemove', function (event) {
	motio.set('speedX', event.pageX - offset.left - motio.width / 2);
	motio.set('speedY', event.pageY - offset.top - motio.height / 2);
});

Mouse over the example to play, and mouse out to pause the sprite animation. Sprite image stolen borrowed from kofaniv.snkplaymore.co.jp.

var $example = $('#sprite .example');
var frame = $example.find('.frame')[0];
var motio = new Motio(frame, {
	fps: 10,
	frames: 14
});

// Play when mouse enters the frame, and pause when it leaves
$example.on('mouseenter mouseleave', function (event) {
	motio[event.type === 'mouseenter' ? 'play' : 'pause']();
});

Mouse over the example, and move mouse from right to left to view different angles. Sprite image stolen borrowed from jbkflex.wordpress.com.

var $example = $('#circview .example');
var exampleLeft = $example.offset().left;
var exampleWidth = $example.width();
var frame = $example.find('.frame')[0];
var motio = new Motio(frame, {
	frames: 18
});

// Activate frame based on the cursor position
$example.on('mousemove', function (event) {
	motio.to(Math.floor(motio.frames / exampleWidth * (event.pageX - exampleLeft)), true);
});
Space B

Sprites are from spriters-resource.com. No example code here, because it is dirty, dumb, and on top of that adapted from older vrsion of Motio. Please ignore it, this is just me goofing around. And you shouldn't be doing games with HTML elements anyway :)

Documentation

Documentation is centralized in the Motio's Repository Wiki, which makes it way easier to maintain and keep always up to date.