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.

Install

$ npm install zanimo

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

tests

Build tests with

npm run build

and open test/index.html in your browser.

API

Zanimo(el | promise[el]) ➜ promise[el]

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
});

Zanimo(el | promise[el], property, value) ➜ promise[el]

Applies a css style on the given DOM element.

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

Zanimo(el | promise[el], property, value, duration, [easing]) ➜ promise[el]

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 */ }
    );

Zanimo.f(*) ➜ ( function(el) ➜ promise[el] )

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);

Credits

@bobylito who came up with the name Zanimo.

peutetre/Zanimo