zanimo

Animation library based on CSS3 transitions and promises

Zanimo.js - Promise based CSS3 transitions

Allows chaining of css transitions in a promise based way, which gives a powerful control over CSS transitions for making animations.

Zanimo.js is licensed under the terms of the MIT License.

$ npm install zanimo

To use in the browser, compile with browserify or fetch a UMD bundle from browserify cdn.

Build tests with

npm run build

and open test/index.html in your browser.

Takes a DOM element or a promise of a DOM element and returns a promise of the given element.

Zanimo(myDomElement).then(function (el) {
    // do something with the DOM element 
}, function (reason) {
    // do something when `myDOMElement` isn't a DOM element 
});

Applies a css style on the given DOM element.

Zanimo(myDomElement, "transform", "translate3d(200px, 200px, 0)")
    .then(function (domElt) { console.log("Done..."); });

Starts a transition on the given DOM element and returns a promise. For now Zanimo does not support hexadecimal color notation or 0px (just use 0) in the value argument.

Zanimo(myDomElement, "width", "200px", 200, "ease-in")
    .then(
        function (domElt) { /* do something on success */ },
        function (reason) { /* do something on error */ }
    );

Encapsulates a Zanimo(el, *) call by returning a function (el) ➜ promise[el].

Useful to define reusable transitions.

var widthTransition = Zanimo.f("width", "200px", 200, "ease-in"),
    heightTransition = Zanimo.f("height", "300px", 200, "ease-in");
 
Zanimo(myDomElement)
    .then(widthTransition)
    .then(heightTransition);

@bobylito who came up with the name Zanimo.