Bug fixes

• [Timeline] Fix onComplete callback not called on reversed timelines (#378)
• [Scroll] Fix onScoll() not properly handling SVG targets by using getBoundingClientRect() for size and offset calculation instead of offsetTop / offsetLeft (#1021)
• [Animation] Fix relative values (+=, -=, *=) not properly refreshed when calling animation.refresh() (#1025)
• [Draggable] draggable.disable() now properly disable the drag without interrupting animations. The old behavior is still possible by chaining methods like this draggable.disable().stop()
• [Draggable] Fix an issue where the internal ResizeObserver won't be properly disconnected on revert (#1041)
• [Draggable] Draggable onUpdate is now only called when the draggable position change (#1032)
• [Docs] Clarify limitations of composition: "blend" with .reverse() and other parameters (#1012)

Bug fixes

TextSplitter

• Fix a bug where the cleanup function returned by split.addEffect() was called after the split html reset when using .refresh()

Docs

• Tweak morphTo description #1049
• Add missing utils import in Stagger grid axis #1048

Breaking changes

Types

• StaggerParameters → StaggerParams

New Features

text.split()

The major new feature of this release is the new text.split() method, an easy to use, fully-featured, lightweight and performant modern text splitter for JavaScript.

It does all the following in only 7KB:

• Split text by characters, words, and lines
• Split words in languages that don't use spaces like Chinese and Japanese
• Can split trough any level of nested tags, even when splitting by lines
• Element cloning with configurable position
• Custom wrapping methods to create masking effects
• Custom HTML wrapper with a powerful templating system
• Handles splitting ѕρє¢ιαℓ ¢нαяα¢тєяѕ and emojis
• Accessible for screen readers
• 100% responsive with the .addEffect() method

Basic Usage

import { text, animate } from 'animejs';

const split = text.split('.my-text');

animate(split.words, {
  x: () => utils.random(-100, 100),
  y: () => utils.random(-100, 100)
});

Check out the full documentation for text.split() here http://animejs.com/documentation/text/split

New Scope methods

scope.addOnce()

Adds a constructor to a Scope that is only called once, allowing you to execute code once and add scoped animations that won't be reverted between media query changes.

scope.keepTime()

Adds a constructor Function that recreates a Timer, Animation, or Timeline between media query changes while keeping track of its current time, allowing to seamlessly update an animation's parameters without breaking the playback state.

Check out the full documentation for text.split() here http://animejs.com/documentation/scope/scope-methods/addonce

New utils methods

utils.keepTime()

Returns a Function that recreates a Timer, Animation, or Timeline while keeping track of its current time, allowing to seamlessly update an animation's parameters without breaking the playback state.

const trackedAnimate = utils.keepTime(() => animate(target, params));

const tracked = trackedAnimate();

New stagger() settings

use and total parameters

The new use and total parameters allow defining custom staggering order:

const split = text.split('article', { lines: true });

// Animate the words with a stagger based on the lines order

animate(split.words, {
  y: () => utils.randomPick(['-100%', '100%']),
  delay: stagger(100, {
    use: 'data-line',
    from: 'last',
    total: split.lines.length
  })
})

Random from parameter

You can now define 'random' to the fromparameter of thestagger()`` function to define a random staggered order:

const split = text.split('article');

animate(split.words, {
  y: () => utils.randomPick(['-100%', '100%']),
  delay: stagger(100, { from: 'random' })
})

Improvements and bug fixes

Animation, Timer, Timeline

• Make sure .refresh() only updates the fromNumbers value when the value is defined as a function based value
• Improves startup performance on first load
• Improves tree shaking

Docs

• Various bug fixes, copy and design tweaks

Fixes

Timer

• Fixes floating point inaccuracies with .stretch(). (#1005)

SVG

• Fixes stroke-linecap defined in a stylesheet overriding attributes defined bycreateDrawable() . (#1002)
• Fixes createDrawable() line effect issues when the attribute / property vector-effect is set to "non-scaling-stroke". (#793)

WAAPI

• Fixes a Promise issue with WAAPI animations when the complete() method is called before the animation plays. (#1001)
• Prevents conflicts between user defined CSS Custom Properties and the WAAPI animate() properties. (#1000)
• Fixes a caching issue that prevented to use different parameters for the same easing function. (#999)

Draggable

• Fixes .revert() not properly reverting the draggable internal Animatable, keeping the x and y styles defined. (#997)
• Fixes onSettle() triggering on the onComplete callback of the x property, before the y property has updated, causing the draggable to sometimes not go back to its initial position. (#997)

Types

• Added Draggable params to exported types #969 by @AdeboyeDN. (#1004)

Fixes

• Fix createScope root param type for ReactRef (#971) thanks @Jimmydalecleveland

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

Bug fixes

• Fix wrong expo easing calculation #591

Improvements

• Add "remove" method on instance #635
• (Re) Add easeOutIn easing function #684

Bug fixes

• Fix bug with visibilitychange event and paused instances #701, #560, #721, #711
• Fix condition for getAttribute when the returned value is 0 #540
• Fix a scaling issue on path animations when animating an element inside an SVG #568

Docs

• Fix ranged staggering example #704
• Better Elastic easings explanations #694
• Cleanup examples

Improvements

• Add matrix and matrix3d parameters to allow the use of matrix values in CSS Transforms #636
• Change steps easing behaviour to match jump-start CSS timing function #625

Bug fixes

• Fix (again) a bug where the animation will "flick" on reverse #623 #586 #503 #577

Improvements

• Add support for values with exponent (-1.12742e-12) #552
• Easing functions refactoring + added Bounce easing

Bug fixes

• Fix wrong unit detection when a value contains spaces #502
• Fix a bug where the parent of responsive SVG path was not properly set #556
• Fix a bug where the animation will "flick" on reverse #512
• Fix a bug where loopBegin callback could be called just before animation complete
• Update anime.running reference when clearing array on visibility change #560, #466
• Update ES6 module instal path #588, #527, #590