animejs

What is animejs?

Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes, and JavaScript Objects.

What are animejs's main functionalities?

Basic Animation

This feature allows you to animate basic properties like translation, rotation, and background color of a DOM element.

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

Timeline Control

Timelines allow you to create complex animation sequences with precise control over the timing of each animation.

var tl = anime.timeline({
  easing: 'easeOutExpo',
  duration: 750
});

tl.add({
  targets: '.box',
  translateX: 250
}).add({
  targets: '.box',
  translateY: 250,
  offset: '-=500' // Starts 500ms before the previous animation ends
});

SVG Animations

Anime.js can animate SVG properties, allowing for intricate and visually appealing vector animations.

anime({
  targets: 'path',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  duration: 1500,
  delay: function(el, i) { return i * 250 },
  direction: 'alternate',
  loop: true
});

Keyframes

Keyframes allow you to define multiple stages of an animation, giving you more control over the animation sequence.

anime({
  targets: '.box',
  keyframes: [
    {translateX: 250},
    {translateY: 250},
    {translateX: 0},
    {translateY: 0}
  ],
  duration: 4000,
  easing: 'easeOutElastic(1, .8)',
  loop: true
});

Other packages similar to animejs

gsap

GSAP (GreenSock Animation Platform) is a powerful JavaScript library for creating high-performance animations. It offers more features and plugins compared to Anime.js, making it suitable for more complex animations.

velocity-animate

Velocity is an animation engine with the same API as jQuery's $.animate(). It is designed for fast performance and is a good alternative for those who are familiar with jQuery animations.

popmotion

Popmotion is a functional, flexible JavaScript animation library. It provides a more functional approach to animations compared to Anime.js, making it a good choice for developers who prefer functional programming paradigms.

README

[!IMPORTANT]

🎉 Anime.js V4 is now available in early access 🎉

After years in the making, Anime.js V4 is finally available in early access for my GitHub Sponsors!

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 'animejs/lib/anime.es.js';

CommonJS

const anime = require('animejs');

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

Chrome	Safari	IE / Edge	Firefox	Opera
24+	8+	11+	32+	15+

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