An animation library based on CSS3 transitions and promises.
JavaScript HTML
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
test
.gitignore update tests + change to mocha with mocha-as-promised Jan 2, 2014
.npmignore Merge branch 'new-api' Jan 14, 2014
.travis.yml fix sauce Jan 3, 2014
CHANGES.md
Gruntfile.js oops Jun 11, 2014
MIT-LICENSE
README.md
browsers.json
package.json update deps and bump to 1.1.3 Feb 20, 2015

README.md

Zanimo.js - Promise based CSS3 transitions Build Status

SauceLabs Status

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.