chore(other-deps): ⬆️ upgrade animejs to v4 - autoclosed

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
animejs (source)	^3.2.2 -> ^4.0.2

---

Release Notes

juliangarnier/anime (animejs)

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

---

Configuration

📅 Schedule: Branch creation - "after 12am and before 5am every weekday,every weekend" in timezone Asia/Kolkata, Automerge - At any time (no schedule defined).

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

♻ Rebasing: Whenever PR is behind base branch, 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.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
js-bottomsheet-website	❌ Failed (Inspect)			Apr 24, 2025 0:02am