JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Small JavaScript library for sprite based animations and panning.
    Filed under 

    • 🔾26%Overall
    • 750
    • 54.6 days
    • 🕩93
    • 👥2

    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.

    Show All