Small JavaScript library for sprite based animations and panning.
JavaScript
Latest commit e23274b Nov 12, 2014 @darsain Merge pull request #20 from Spone/patch-3
Update README.md
Permalink
Failed to load latest commit information.
dist Release 2.2.2 Aug 7, 2014
docs Merge pull request #19 from Spone/patch-2 Nov 11, 2014
src Simplified rendering pipeline, fixes #8, closes #9 Aug 7, 2014
.editorconfig Restructuring repo Apr 5, 2013
.jshintrc Updating .jshnitrc Aug 7, 2014
CHANGELOG.md
CONTRIBUTING.md Restructuring repo Apr 5, 2013
Gruntfile.js Fixed Gruntfile meta.json references Dec 6, 2013
README.md Update README.md Nov 11, 2014
meta.json Release 2.2.2 Aug 7, 2014
motio.jquery.json
package.json Updating Gruntfile Dec 4, 2013

README.md

Motio

Small JavaScript library for simple but powerful sprite based animations and panning.

Motio takes an element and animates its background position to create an animation effect. All is super optimized for speed and chained to the requestAnimationFrame, with a polyfill for older browsers without it.

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

Dependencies

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

Compatibility

Works everywhere.

Usage

Sprite animation mode:

var element = document.querySelector('#sprite');
var sprite = new Motio(element, {
	fps: 10,
	frames: 14
});
sprite.play();   // start animation
sprite.pause();  // pause animation
sprite.toggle(); // toggle play/pause
sprite.toStart(); // animate to 1st frame and stop
sprite.toEnd();   // animate to last frame and stop
sprite.to(10);    // animate to 11th frame and stop

Seamless background panning mode:

var element = document.querySelector('#panning');
var panning = new Motio(element, {
	fps: 30, // Frames per second. More fps = higher CPU load.
	speedX: -30 // Negative horizontal speed = panning to left.
});
panning.play();    // start animation
panning.pause();   // pause animation
panning.toggle();  // toggle play/pause

Download

Latest stable release:

jQuery plugin version:

When isolating issues on jsfiddle, you can use this URL:

Documentation

Can be found in the docs directory.

Contributing

Please, read the Contributing Guidelines for this project.