Giter VIP home page Giter VIP logo

animorph's Introduction

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.

animorph's People

Contributors

claudiobmgrtnr avatar jantimon avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.