juliangarnier/anime v4.0.0

on GitHub

A complete rewrite of Anime.js, with a modular, ESM-first API, improved performance, and TONS of new features.

Timer

createTimer(options)

Schedules and controls timed function callbacks that can be used as a replacement to setTimeout() or setInterval(), keeping animations and callbacks in sync.
This is the base class that both Animation and Timeline inherit from.

• Properties: duration, delay, loop, loopDelay, frameRate, playbackRate
• Methods: play(), pause(), resume(), restart(), cancel(), seek(), stretch(), then()

Animation

animate(targets, options)

New parameters:

• New Object syntax, with from parameter { from: .5, to: .5, ease: 'inOut(3)' }
• playbackEase: Apply easing to overall animation progress
• composition: Control how animations interact with existing ones:
  • "replace": Override existing animations (default)
  • "blend": Combine additively with existing animations
  • "none": Run independently without affecting others
• modifier: Function to transform animation values during render
• frameRate: Control the max fps of the animation
• keyframes: More flexible keyframes system with four different syntaxes:
  • Tween value keyframes
  • Tween parameters keyframes
  • Duration-based keyframes
  • Percentage-based keyframes

Improvements

• Added support for CSS variables
• Added support for hex colors with an alpha channel, e.g., '#F443' or '#FF444433'.

New callbacks:

• onBeforeUpdate: Called before each animation update
• onRender: Triggered when animation values are updated and applied
• onLoop: Triggered when animation completes an iteration
• onPause: Called when animation is paused, either manually or when interrupted by an other animation

New methods:

• refresh(): Update all function-based values with new states
• revert(): Restore all animated properties to their original values
• complete(): Immediately complete the animation
• stretch(newDuration): Scale animation to new duration
• then(callback): Simpler Promise handling

Timeline

createTimeline(options)

Better children defaults definition with a dedicated defaults parameter.
Children loop and direction parameters are now correctly taken into account, and will be counted in the total duration of the timeline, allowing seeking trough the different iterations.

New methods:

• set(target, params, position): Set properties instantly at position
• call(function, position): Execute callback at timeline position
• sync(animation, position): Synchronize external animation with timeline
• label(name, position): Create named markers for referencing
• remove(targets, propertyName): Remove specific animations
• refresh(): Update all function-based values

New position syntax:

• Label references: "labelName"
• Previous animation references: "<" (end) and "<<" (start)
• Relative positions: "+=100", "-=50", "*=1.5"

Animatable

createAnimatable(target, properties)

Efficiently animates target properties, making it an ideal replacement for [animate()](https://animejs.com/documentation/animation) and [utils.set()](https://animejs.com/documentation/utilities/set) in situations where values change frequently, such as cursor events or animation loops.

Draggable

createDraggable(target, options)

Adds draggable capabilities to DOM Elements with physics, constraints, and callbacks.

ScrollObserver

onScroll(options)

Triggers and synchronises Timer, Animation and Timeline instances on scroll.

Scope

createScope(options)

Anime.js instances declared inside a Scope can react to media queries, use custom root elements, share default parameters, and be reverted in batch, streamlining work in responsive and component-based environments.

SVG

svg

Enhanced SVG animation helpers.

New methods:

• morphTo(path, precision): Shape morphing between SVG paths
• createMotionPath(path): Move elements along SVG paths
• createDrawable(selector, start, end): Control SVG path drawing

Stagger

stagger(options)

The stagger() function can now be used as a Timeline time position.

Utils

utils

Utility functions for DOM manipulation, math operations, and animation helpers, that can be easily chained together.

WAAPI

waapi.animate(targets, options)

Create Native browser WAAPI powered animations with the simplicity of Anime.js.

Easing System

New easing functions:

• linear(x1, x2, x3, ...): Multi-point linear interpolation
• irregular(length, randomness): Random stepped easing
• in(power), out(power), inOut(power): Parameterized power functions

Spring

createSpring(options)

New spring syntax with Object parameters.

Engine Configuration

engine

Easier global settings configuration

• engine.defaults: Set default animation parameters
• engine.timeUnit: Choose between seconds or milliseconds
• engine.precision: Control decimal precision for animated values globally
• engine.pauseOnDocumentHidden: Control if animations pause when tab is inactive