anime.js

JavaScript animation engine | animejs.com

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

$ npm install animejs --save

or manual download.

Usage

ES6 modules

import anime from 'lib/anime.es.js';

CommonJS

const anime = require('lib/anime.js');

File include

Link anime.min.js in your HTML :

<script src="anime.min.js"></script>

Hello world

anime({   targets: 'div',   translateX: 250,   rotate: '1turn',   backgroundColor: '#FFF',   duration: 800 });

Documentation

• Targets
• Properties
• Property parameters
• Animation parameters
• Values
• Keyframes
• Stagering
• 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

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