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

Anime.js

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

Sponsors

Anime.js is 100% free and is only made possible with the help of our sponsors. Help the project become sustainable by sponsoring us on GitHub Sponsors.

Platinum sponsors

Silver sponsors

Usage

Anime.js V4 works by importing ES modules like so:

import { animate, stagger, } from 'animejs'; animate('.square', { x: 320, rotate: { from: -180 }, duration: 1250, delay: stagger(65, { from: 'center' }), ease: 'inOutQuint', loop: true, alternate: true });

V4 Documentation

The full documentation is available here.

V3 Migration guide

You can find the v3 to v4 migration guide here.

NPM development scripts

First, run npm i to install all the necessary packages. Then, execute the following scripts with npm run <script>.

script	action
dev	Watch any changes in src/ and compiles the esm version to lib/anime.esm.js
dev-types	Same as dev, but also run TypeScript and generate the types/index.d.ts file
build	Generate types definition and compiles ESM / UMD / IIFE versions to lib/
test-browser	Start a local server and start all browser related tests
test-node	Start all Node related tests
open-examples	Start a local server to browse the examples locally

© Julian Garnier | MIT License