Anime.js Animation Engine

Anime.js Animation Engine

animejs.com

3

About this website

Anime.js is a lightweight JavaScript animation engine that provides a single API for animating CSS properties, SVG attributes, DOM attributes, and arbitrary JavaScript objects. Now in its fourth major version, the library has been rebuilt with a modular architecture where each feature is an independent module that can be imported individually, keeping bundle size to approximately twenty-seven kilobytes for the full package and significantly less when only specific modules are used. The animation API supports per-property parameters, allowing each animated value within a single call to have its own duration, delay, easing, and direction. Keyframes are defined as arrays of values with optional offset positions, and the composition system can blend multiple animations targeting the same property on the same element. The built-in timeline system orchestrates multiple animations with relative and absolute time positioning, enabling precise sequencing where animations can start at specific offsets or be chained relative to previous ones. A stagger utility distributes delays across multiple elements, supporting grid-based patterns, from-center propagation, and value-based staggering for creating wave-like effects. SVG tooling includes shape morphing between different path data, line drawing with stroke-dashoffset animation, and motion path following where an element moves along an SVG path. The scroll observer synchronizes animations to scroll position and triggers animations when elements enter or leave the viewport, with configurable threshold and synchronization modes. A draggable module adds physics-based drag interactions with spring release, snap points, and throw behavior. The easing library includes over thirty built-in functions plus a spring physics generator with configurable stiffness and damping.

Tags & Categories

Statistics

3
Views
0
Clicks
0
Like
0
Dislike

Comments

Log In to post a comment

No comments yet. Be the first!