Necessarily Precedes Mischief

    animorph

    0.0.15 • Public • Published

    Animorph

    npm version Build status Dependency Status js-semistandard-style license

    Morph your dom with style.
    Animorph.js is a small javascript framework that helps you to move any kind of elements inside of your dom.

    • Lighweight (below 2.5kb gzipped)
    • Chrome, Firefox, IE 9+, Safari
    • Zero dependencies
    • jQuery bindings (optional)
    • CommonJS, AMD, and global interface
    • TypeScript Definitions (optional)

    Features

    As the main task of Animorph is adding and removing CSS classes it leaves you in control about the animation details.

    • Enter animation
    • Stagger animation
    • Leave animation
    • Move animation

    Check it out on Codepen here (basic example) or here (advanced example)

    Installation

    NPM

    Install the plugin with npm:

    $ npm install animorph --save

    Yarn

    Install the plugin using yarn:

    $ yarn add animorph

    CDN

    Basic Usage

    The following javascript code will start the animation and add all classes similar to angular animate so you can keep the entire animation declaration you css files.

    Vanilla javascript without any dependencies

      const element = document.querySelector('.foo');
      const wrapper = document.querySelector('.bar');
      animorph.appendTo(element, wrapper);

    jQuery (please use animorph.jquery.min.js from the dist folder)

      $('.foo').amAppendTo('.bar');

    Please take a look at the very simple enter example or at the slightly more advanced example

    Contribution

    You're free to contribute to this project by submitting issues and/or pull requests. This project uses the semistandard code style.

    License

    This project is licensed under MIT.

    Install

    npm i animorph

    DownloadsWeekly Downloads

    66

    Version

    0.0.15

    License

    MIT

    Unpacked Size

    185 kB

    Total Files

    21

    Last publish

    Collaborators

    • claudiobmgrtnr