animorph

Morph your dom with style

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
animorph
2000.0.155 years ago6 years agoMinified + gzip package size for animorph in KB

Readme

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
  • 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.