Core Technologies / Anime.js
Anime.js
Powerful Animation
Library
Master JavaScript animation with Anime.js — a lightweight library that powers smooth, performant animations for modern web experiences.
Keyframe Animation Engine
Anime.js provides a powerful keyframe system that lets you animate any property of any element with precise control. Define start and end values, timing, easing, and duration to create smooth, synchronized animations across your entire application.
- Animate any CSS, SVG, or JavaScript property
- Chainable animation sequences
- Multiple easing functions for smooth motion
- Playback controls — play, pause, reverse, seek
- Timeline synchronisation for complex sequences
Demonstrates Anime.js performance by orchestrating a 160-element grid. Uses complex keyframes and stagger from the center to seamlessly morph shape, scale, color, and rotation.
Staggered & Grouped Animations
Create complex visual effects by staggering animations across multiple elements. Anime.js automatically calculates delays and offsets, making it easy to build cascading effects, wave animations, and coordinated motion graphics.
- Automatic stagger calculation
- Sequential and parallel animation groups
- Delay offset for wave and cascade effects
- Target callbacks for element-specific logic
- Animation chaining and sequencing
Demonstrates Anime.js stagger() capability. Instead of manually writing 40 different animation delays, the stagger function mathematically offsets each bar from the center outwards, creating a complex organic wave with a single line of code.
Live Trading Data Visualization
Create high-performance, interactive charts and data visualizations that react instantly to changing values. Anime.js makes it simple to animate complex SVG paths and numerical values, providing a fluid experience for financial dashboards and real-time data feeds.
- Smooth SVG path morphing for trend lines
- Real-time value interpolation for counters
- Dynamic colour shifts based on data trends
- Interactive hover and update animations
- Optimised rendering for high-frequency updates
Real-time trading terminal simulation. Seamlessly morphs multiple complex SVG paths while simultaneously interpolating numerical values via Anime.js.
Performance Optimisation
Built for speed, Anime.js uses requestAnimationFrame for smooth 60 fps animations. It intelligently manages memory, automatically stops animations when complete, and provides performance monitoring tools to ensure your animations never lag.
- GPU-accelerated transforms
- Automatic cleanup and memory management
- Performance metrics and diagnostics
- Batched DOM updates
- Efficient re-paint and reflow handling
Counts from 0 to 1,000,000 using Anime.js onUpdate callback — running on requestAnimationFrame at a smooth 60 fps with zero DOM thrashing.
Advanced Easing & Morphing
Go beyond basic easing with Anime.js advanced animation capabilities. Morph between complex shapes, interpolate colours smoothly, and apply custom easing functions to create visually stunning and emotionally engaging interactions.
- Cubic Bezier custom easing curves
- Spring physics-based animations
- SVG path morphing and transformation
- Colour gradient interpolation
- Custom easing function support
SVG path morphing and a circle following the curve using a custom cubicBezier easing — the wave flips direction and the dot travels the full path simultaneously.