Anime.js

JavaScript animation engine

Animation
juliangarnier/animeanimejs.comanimejs

README


  anime.js

JavaScript animation engine | animejs.com

npm version npm downloads

Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API.
  It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

Getting started | Documentation | Demos and examples | Browser support


Getting started


Download


Via npm

  1. ``` sh
  2. $ npm install animejs --save
  3. ```

or manual download.

Usage


ES6 modules


  1. ``` js
  2. import anime from 'animejs/lib/anime.es.js';
  3. ```

CommonJS


  1. ``` js
  2. const anime = require('animejs');
  3. ```

File include


Link anime.min.js in your HTML :

  1. ``` html
  2. <script src="anime.min.js"></script>
  3. ```

Hello world


  1. ``` js
  2. anime({
  3.   targets: 'div',
  4.   translateX: 250,
  5.   rotate: '1turn',
  6.   backgroundColor: '#FFF',
  7.   duration: 800
  8. });
  9. ```

Documentation


Targets
Properties
Property parameters
Animation parameters
Values
Keyframes
Staggering
Timeline
Controls
Callbacks and promises
SVG Animations
Easing functions
Helpers

Demos and examples


CodePen demos and examples
juliangarnier.com
animejs.com
Moving letters by @tobiasahlin
Gradient topography animation by @crnacura
Organic shape animations by @crnacura
Pieces slider by @lmgonzalves
Staggering animations
Easings animations
Sphere animation
Layered animations
anime.js logo animation


Browser support


ChromeSafariIEFirefoxOpera
---------------
24+8+11+32+15+

## anime-js-v3-logo

Website | Documentation | Demos and examples | MIT License | © 2019 Julian Garnier.