Update dependency animejs to v4 #314

renovate · 2025-04-06T18:36:02Z

This PR contains the following updates:

Package	Change	Age	Confidence
animejs (source)	`3.2.1` -> `4.2.2`

Release Notes

juliangarnier/anime (animejs)

`v4.2.2`

Compare Source

Fixes

SVG
- createMotionPath(): Fix a bug introduced in v4.2.1 that wrapped the target back to 0 when reaching 1 (#1104
  )

`v4.2.1`

Compare Source

New features

SVG
- createMotionPath(): Add an offset parameter (#1037) (@TheHyrox)
Draggable
- createDraggable(): Add a dragThreshold parameter (#1091) (@craig-jennings)

Changes

Timer, Animation, Timeline
- .reset(softReset): The softReset parameter type is now a Boolean instead of an int
Draggable
- createDraggable(): The drag threshold is now 3px with a mouse and 7px with touch instead of 3px everywhere

Fixes

onScroll
- Fix wrong target offsets calculation when container is scaled (#1098) (@sxnb)
Types
- Fix await animate() throwing Typescript error (#1043)

Docs

Every demos can now be edited on CodePen
Added .reset() chapters

`v4.2.0`

Compare Source

Breaking Changes

Utils
- Remove interpolate() (use the simplified lerp() instead)
- Remove the clock parameter from lerp() (use the framerate dependent damping function damp() instead)
- Setting a CSS variable using utils.set() now computes the variable value instead of setting the var name. To set the variable name without conversion, use a function-based value (x: () => var(--value)) or use the native element.style.setProperty('--value')
Easings
- linear(), irregular(), steps() and cubicBezier() have been removed from the core and must be imported separately

New Features

API
- All modules can now be imported individually with subpaths:

import { animate } from 'animejs/animation';
import { createTimer } from 'animejs/timer';
import { createTimeline } from 'animejs/timeline';
import { createAnimatable } from 'animejs/animatable';
import { createDraggable } from 'animejs/draggable';
import { createScope } from 'animejs/scope';
import { engine } from 'animejs/engine';
import * as events from 'animejs/events';
import * as easings from 'animejs/easings';
import * as utils from 'animejs/utils';
import * as svg from 'animejs/svg';
import * as text from 'animejs/text';
import * as waapi from 'animejs/waapi';

Spring
- Add bounce parameter to control the strength of the spring
- Add duration parameter to define the perceived duration of the spring
- Add onComplete callback called when the spring currentTime hits the perceived duration
- Support for over-damped springs with stiffness values below 30 (previously these values had no effect)
WAAPI
- waapi.animate() built-in eases are now on par with the JS animate() method, plus all native WAAPI easing parameters
- Add persist parameter to control whether the animation should be canceled on finish
JS Animation
- Add support for CSS variable values (e.g., animate(target, { x: 'var(--x, 100px)' }))
Utils
- Add createSeededRandom() to generate pre-seeded pseudo-random utility functions
Docs
- Add an easing functions editor

Bug Fixes

Draggable
- Allow touch dragging within Shadow DOM (#1067)
- Fix draggable getting stuck while dragging near the origin of the initial grab
Animation
- Fix animation.revert() not properly reverting multi-target animations styles when targets have different starting style values
- Fix inline styles with hyphens (e.g., border-radius, stroke-width) not being properly reverted
WAAPI
- Fix animation.cancel() not properly committing styles before canceling
- Fix animation.revert() not properly reverting multi-target animation styles and not overriding newly added styles
- Fix scroll-controlled WAAPI animations being disconnected after completing once
- Fix staggered animations with reversed: true not updating on play
Timeline
- Fix tl.call() not being fired in some cases (#1088)

Changes

Utils
- stagger() has been moved to /utils but still available globally via import { stagger } from 'animejs'
WAAPI
- waapi.convertEase() values are now rounded to 4 decimals (previously no rounding)
Spring
- mass minimum value is now clamped to 1
- stiffness minimum allowed value is now 0
- damping minimum allowed value is now 0
Easings
- Ease Back default overshoot value is now 1.7 (previously 1.70158)
Types
- Add @types/node dependency for type checking (#1069)
Build
- Simplify build scripts: build, dev, dev:test, test:browser, test:node, open:examples

Deprecated

Text
- text.split() deprecated, use splitText() or text.splitText() instead
Spring
- createSpring() deprecated, use spring() instead

`v4.1.4`

Compare Source

Bug fixes

[Scroll] Fixes a bug where onEnter could be called even if the target is outside of the viewport if an other onScroll instance is already running

`v4.1.3`

Compare Source

Improvements

Increase spring stiffness and velocity limits (#1039, #1040) @lixiaolin94

Bug fixes

[Scroll] Fixes threshold with transforms on parent (#1059) @almirbi
[Targets, Text] Fix non-browser usage (#1056) @ClassicOldSong
[Draggable] Fix Draggable's onUpdate and onSettle callbacks not triggered when only updating the x axis (#1045)
[Draggable] Prevents error when removing the draggable container element from the DOM (#1064)
[Animatable] Fix callbacks triggered multiple times by setting the callbacks to a dedicated Animation instead of applying them to each individual property animations
[Animation] Fix tweens composition inconsistencies on tweens with composition: 'replace' not controlled by a Timeline
[Animation] Fix some time calculation inconsistencies when using seconds engine.timeUnit = 's' that affected tweens composition

Types

[WAAPI] Added missing WAAPIAnimation type to the Revertible type
[Stagger] The stagger() function return type is now inferred from the input value type
[Eases] Fix the error "A rest parameter must be of an array type." of the linear easing type (#972)
Export the following missing types (#1051, #1010):
- SpringParams
- TimelinePosition
- TimelineAnimationPosition
- WAAPITweenValue
- WAAPIFunctionValue
- WAAPIKeyframeValue
- WAAPICallback
- WAAPITweenOptions
- WAAPIAnimationOptions
- WAAPIAnimationParams
- ScrollThresholdValue
- ScrollThresholdParam
- ScrollObserverAxisCallback
- ScrollThresholdCallback
- ScrollObserverParams

`v4.1.2`

Compare Source

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)

`v4.1.1`

Compare Source

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

`v4.1.0`

Compare Source

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

`v4.0.2`

Compare Source

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`

Compare Source

Fixes

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

`v4.0.0`

Compare Source

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`

Compare Source

Bug fixes

Fix wrong expo easing calculation #591

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

If you want to rebase/retry this PR, check this box

This PR was generated by Mend Renovate. View the repository job log.

github-actions · 2025-04-06T18:36:46Z

The following packages are updated in the Pull Request.

animejs

The affected CDN links are listed below.

animejs

❌ The file lib/anime.min.js does not exist.

stevenjoezhang · 2025-07-01T02:18:57Z

v4.1.2 missing on CDNJS

https://cdnjs.com/libraries/animejs

renovate bot force-pushed the renovate/animejs-4.x branch 2 times, most recently from abafac0 to 6f2a56d Compare April 16, 2025 06:47

renovate bot force-pushed the renovate/animejs-4.x branch from 6f2a56d to d9112eb Compare April 27, 2025 10:32

renovate bot force-pushed the renovate/animejs-4.x branch from d9112eb to c20a887 Compare June 18, 2025 05:06

renovate bot force-pushed the renovate/animejs-4.x branch from c20a887 to ba47b89 Compare June 30, 2025 03:19

stevenjoezhang marked this pull request as draft July 1, 2025 02:18

renovate bot force-pushed the renovate/animejs-4.x branch 3 times, most recently from 9ea3b0c to 2d3b4ef Compare July 30, 2025 23:35

renovate bot force-pushed the renovate/animejs-4.x branch 2 times, most recently from 371fdf7 to b221b5f Compare August 15, 2025 12:51

renovate bot force-pushed the renovate/animejs-4.x branch from b221b5f to 3d74564 Compare August 19, 2025 15:10

renovate bot force-pushed the renovate/animejs-4.x branch 2 times, most recently from dd7f456 to c942ac2 Compare October 2, 2025 18:38

renovate bot force-pushed the renovate/animejs-4.x branch from c942ac2 to cd5fbbd Compare October 8, 2025 20:50

Update dependency animejs to v4

f7ff2be

renovate bot force-pushed the renovate/animejs-4.x branch from cd5fbbd to f7ff2be Compare October 10, 2025 10:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Update dependency animejs to v4 #314

Update dependency animejs to v4 #314

Uh oh!

renovate bot commented Apr 6, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Apr 6, 2025 •

edited

Loading

Uh oh!

stevenjoezhang commented Jul 1, 2025 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Update dependency animejs to v4 #314

Are you sure you want to change the base?

Update dependency animejs to v4 #314

Uh oh!

Conversation

renovate bot commented Apr 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Release Notes

Fixes

New features

Changes

Fixes

Docs

Breaking Changes

New Features

Bug Fixes

Changes

Deprecated

Bug fixes

Improvements

Bug fixes

Types

Bug fixes

Bug fixes

TextSplitter

Docs

Breaking changes

Types

New Features

text.split()

Basic Usage

New Scope methods

scope.addOnce()

scope.keepTime()

New utils methods

utils.keepTime()

New stagger() settings

use and total parameters

Random from parameter

Improvements and bug fixes

Animation, Timer, Timeline

Docs

Fixes

Timer

SVG

WAAPI

Draggable

Types

Fixes

New parameters:

Improvements

New callbacks:

New methods:

New methods:

New position syntax:

New methods:

Easing System

New easing functions:

Bug fixes

Configuration

Uh oh!

github-actions bot commented Apr 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

animejs

Uh oh!

stevenjoezhang commented Jul 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

renovate bot commented Apr 6, 2025 •

edited

Loading

`text.split()`

New `Scope` methods

`scope.addOnce()`

`scope.keepTime()`

New `utils` methods

`utils.keepTime()`

New `stagger()` settings

`use` and `total` parameters

Random `from` parameter

github-actions bot commented Apr 6, 2025 •

edited

Loading

stevenjoezhang commented Jul 1, 2025 •

edited

Loading