Morph your dom with style


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
180Feb 9, 2018Oct 3, 2016Minified + gzip package size for animorph in KB



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)


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)



Install the plugin with npm:

$ npm install animorph --save


Install the plugin using yarn:

$ yarn add animorph


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)


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


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


This project is licensed under MIT.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from