v4.0.2

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)

v4.0.1

Fixes

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

v4.0.0

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

Tip

If you're migrating from v3, check out the migration guide.

animejs-v4-release-video.mp4

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

v3.2.2

Bug fixes

• Fix wrong expo easing calculation #591

v3.2.1

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

3.2.0

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

v3.1.0

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

v3.0.1

Bug fixes

• Fix ReferenceError on document when running anime.js on the server #472 #481 #345
• Fix a bug that prevented complete callback to be called again when re-playing the animation #483 #373 #378 #392 #408
• Fix a bug triggering a TL promise instantly #159

v3.0.0

New features

• New easings: spring(mass, stiffness, damping, velocity) and steps(x)
• Add endDelay parameter
• New keyframes system
• New staggering helper
• New callbacks: loopBegin(), loopComplete(), changeBegin(), change() and changeComplete()
• Automatic CSS units conversion
• Responsive motion path animation
• New set() helper to apply values instantly to multiple targets
• ES6 Modules and new build process
• New documentation
• A website.

Bug fixes

• No need to re-define a transform property when animating multiple transforms on the same target in a timeline
• Improved simultaneous animations on the same target #257
• Allow remove() to remove targets from timeline #318 #286
• Reversed animations can now be delayed using endDelay #254
• Better inline style unit handling (check inline style before getComputedStyle) #251
• SVG scale property is no longer overridden by CSS transform scale #316
• Fix Uncaught “TypeError: Cannot read property 'targets' of undefined” when there are no TL parameters object specified #341
• Fix a bug that prevented specific HTML ids selectors to be selected (HEX colours) #281
• Fix wrong initial SVG transform value in some cases #340

API changes

• run() callback has been replaced by change()
• animations are now paused when tab of window is not active
• getValue() has been replaced by get()
• Cubic Bézier curves are now defined using a string ‘cubicBezier(x1,y1,x2,y2)’ instead of an array
• Timeline offset property has been replaced by timelineOffset #229
• Timeline offset can be set as a second argument inside .add()

v2.2.0

Improvements

• Performances boost, up to 1.5 faster 🔥
• Add support for RGBA and HSLA colors animations

Bug fixes

• Fix timeline children begin() callback
• Fix a bug where some timeline durations weren’t properly calculated
• Fix a bug where anime.path() initial values weren’t properly set #245
• Fix a bug where percentage unit starting values were miscalculated #238
• begin() and complete() callbacks are now called instantly if duration is 0