aeon.js is a lightweight, performance-oriented TypeScript animation library following the Anime.js API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

Getting started

Why use aeon?

Anime is a great library and will work for a majority of use-cases! At Immutable we needed more fine-tuned performance, more granular control over the animation lifecycle and had to overcome several legacy issues with Anime's behavior.

Read about the changes

Many efforts were made to maintain parity with Anime's API while adding new features, improving performance, incorporating TypeScript and adding React support.

See the documentation

Staggering

Follow through animations made easy.

forward
from index
from center
easing
reversed
ripple

Aeon's built-in staggering system makes complex follow through and overlapping animations simple. It can be used on both timings and properties.

Learn more about staggering

Layered CSS transforms

One element is all you need.

translateX
translateY
rotate
scale

Animate multiple CSS transforms properties with different timings simultaneously on a single HTML element.

Learn more about keyframes

Controls and callbacks

Timing is everything.

animation begin
loop 1 begin
change begin
change complete
loop 1 complete
reverse
loop 2 begin
change begin
change complete
loop 2 complete
reverse
loop 3 begin
change begin
change complete
loop 3 complete
animation complete
delay
end-delay
change

Play, pause, control, reverse and trigger events in sync using the complete built-in callbacks and controls functions.

Learn more about callbacks

Animate anything

HTML, JS, CSS, SVG.

Aeon works with anything web. CSS, SVG, DOM attributes and JavaScript Objects: animate everything with a single unified API.

Learn more about animatable properties