zanimo

    1.1.3 • Public • Published

    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.

    Install

    npm i zanimo

    DownloadsWeekly Downloads

    142

    Version

    1.1.3

    License

    MIT

    Last publish

    Collaborators

    • 42loops