Animorph

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

• https://unpkg.com/animorph/dist/animorph.min.js
• https://unpkg.com/animorph/dist/animorph.jquery.min.js

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.