animejs

Anime.js v4 Skill

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.

Installation

NPM

npm install animejs

ES Modules Import

import { animate } from 'animejs';

CDN (ES Modules)

import { animate } from 'https://esm.sh/animejs';

CDN (UMD)

<script src="https://cdn.jsdelivr.net/npm/animejs/dist/bundles/anime.umd.min.js"></script>
<script>
  const { animate } = anime;
</script>

Core Concepts

Anime.js v4 is modular and tree-shakeable. Import only what you need:

// Full import
import { animate, createTimeline, stagger, createDraggable } from 'animejs';

// Standalone modules for smaller bundles
import { animate } from 'animejs/animation';
import { createTimeline } from 'animejs/timeline';
import { createTimer } from 'animejs/timer';

Documentation Sitemap

The complete anime.js v4 documentation structure:

Getting Started

• Installation (NPM, CDN, Direct download)
• Module imports (ES Modules, CommonJS, UMD)
• Using with vanilla JS
• Using with React

Timer (createTimer)

• Playback Settings: delay, duration, loop, loopDelay, alternate, reversed, autoplay, frameRate, playbackRate
• Callbacks: onBegin, onComplete, onUpdate, onLoop, onPause, then()
• Methods: play(), reverse(), pause(), restart(), alternate(), resume(), complete(), reset(), cancel(), revert(), seek(), stretch()
• Properties: currentTime, progress, paused, completed, etc.

Animation (animate)

• Targets: CSS Selector, DOM Elements, JavaScript Objects, Array of targets
• Animatable Properties: CSS Properties, CSS transforms, CSS Variables, JS Object properties, HTML Attributes, SVG Attributes
• Tween Value Types: Numerical, Unit conversion, Relative (+=, -=, *=), Color, Color function, CSS variable, Function based
• Tween Parameters: to, from, delay, duration, ease, composition, modifier
• Keyframes: Tween values, Tween parameters, Duration based, Percentage based
• Playback Settings: delay, duration, loop, loopDelay, alternate, reversed, autoplay, frameRate, playbackRate, playbackEase, persist
• Callbacks: onBegin, onComplete, onBeforeUpdate, onUpdate, onRender, onLoop, onPause, then()
• Methods: play(), reverse(), pause(), restart(), alternate(), resume(), complete(), cancel(), revert(), reset(), seek(), stretch(), refresh()