Releases: juliangarnier/anime
Releases Β· juliangarnier/anime
Release list
v4.5.0
New Features
- Adapters
- New
registerAdapter()API to extendanimate()andutils.set()to non-DOM targets (learn more: https://animejs.com/documentation/adapters)
- New
- Three.js adapter
- New built-in three.js adapter, imported as a side-effect from
animejs/adapters/three, to animateObject3D, materials, lights, cameras, audio nodes,UniformNode(TSL) and instanced meshes (learn more: https://animejs.com/documentation/adapters/three)
- New built-in three.js adapter, imported as a side-effect from
- Stagger
- Auto-grid mode now supports 3D layouts, using
{x, y, z}coordinates or an explicitgrid: [columns, rows, depth]triplet - The
fromparameter now accepts[x, y, z]normalized coordinates andaxisnow accepts'z'for 3D grid origins - New
jitterparameter to add a random offset to staggered values, either a single number or a[start, end]range - New
seedparameter to makejitterandfrom: 'random'reproducible
- Auto-grid mode now supports 3D layouts, using
Bug Fixes and improvements
- Color
- Color animations now blend RGB channels in pseudo-linear space for smoother, more even transitions (intermediate colors differ slightly from previous versions)
- Render
- Fix a flicker that could appear randomly between iterations of reversed loops
- Fix a flicker that could appear randomly on alternate loops when using non-integer duration values
- Timeline
- Fix a backward seek leaving a timeline child stuck at its end value when all its properties share the same delay
- Fix a timeline child whose delay is longer than its duration overwriting a later sibling's value on a forward seek
- Fix stale values when seeking a timeline whose children animate the same property through delayed tweens, most visible with staggered
jitterdelays - Fix an implicit
fromvalue resolving to a stale value when an overridden tween sits earlier in the chain - Improve performance when building large timelines with many overlapping
.add()calls on the same property, and fix a case where such a timeline could cancel itself
- Keyframes
- Fix a floating point precision issue producing incorrect intermediate values in keyframe arrays
- Fix scrubbing backward past the start of a keyframe sequence not restoring the first keyframe's
fromvalue - Fix scrubbing forward past the end of a keyframe sequence leaving the target stuck on a previous keyframe's value
- Fix sequential keyframes occasionally detected as overlapping because of floating point drift, leaving the target stuck on the wrong value when scrubbing
- Animation
- Fix function-based and CSS variable
fromvalues in object form ({ from, to }) not re-resolving onrefresh() - Fix
stretch()not correctly scaling animations that use keyframes
- Fix function-based and CSS variable
- Scroll
- Fix a
getBoundingClientRectcrash that could happen when a scroll container resized before its target was ready
- Fix a
- Engine
- More accurate frame scheduling that no longer drops frames arriving slightly early because of
requestAnimationFramejitter - Faster
engine.speedandengine.timeUnitupdates that skip unnecessary work when the value does not actually change
- More accurate frame scheduling that no longer drops frames arriving slightly early because of
v4.4.1
Bug fix
- Fix a regression introduced in
4.4.0with timeline.call()not triggering properly in some cases.
v4.4.0
Breaking Changes
- Transforms
- Transforms now follow a fixed render order (
perspective>translate>rotate>scale>skew), regardless of the order they are defined in animation parameters:// Before: scale rendered first because it was defined first animate(el, { scale: 2, translateX: 100 }) // β scale(2) translateX(100px) // After: order is always fixed animate(el, { scale: 2, translateX: 100 }) // β translate(100px, 0px) scale(2)
matrixandmatrix3dcan no longer be animated directly (they are still preserved when read from inline styles and can be set using transform: 'matrix(...)')
- Transforms now follow a fixed render order (
- Function-based values
- The third argument of function-based value callbacks changed from
total(Number) totargets(Array). To migrate, replacetotalwithtargets.length:// Before translateX: (target, index, total) => total * 10 // After translateX: (target, index, targets) => targets.length * 10
- A fourth argument
prevTweenis now passed to function-based value callbacks, providing access to the previous sibling tween's computed end value for the same target and property.
- The third argument of function-based value callbacks changed from
- Stagger
- The stagger callback signature changed to match function-based values: the third argument is now the
targetsarray instead of the total count:// Before delay: stagger(100, { use: (target, i, total) => total - i }) // After delay: stagger(100, { use: (target, i, targets) => targets.length - i })
- The stagger callback signature changed to match function-based values: the third argument is now the
New Features
- scrambleText
- New
scrambleText()function-based value to animate text with a character-by-character scramble/reveal effect (learn more: https://animejs.com/documentation/text/scrambletext)
- New
- Stagger
- New
grid: trueauto-grid mode that computes a 2D layout from element positions or JS object coordinates ({x, y}) instead of requiring explicit[columns, rows]dimensions - The
fromparameter now accepts[x, y]normalized coordinate arrays (0 to 1) for precise grid origin control
- New
- Timer / Animation / Timeline
- New
priorityparameter to control execution order within the engine tick loop
- New
- Transforms
- Adjacent axis properties are now grouped into CSS shorthand for shorter transform strings:
translateX+translateYβtranslate(x, y)translateX+translateY+translateZβtranslate3d(x, y, z)scaleX+scaleYβscale(x, y)scaleX+scaleY+scaleZβscale3d(x, y, z)
- Inline transform parsing rewritten to properly handle multi-argument CSS functions (
translate(x, y),scale3d(x, y, z)) and nestedcalc()expressions
- Adjacent axis properties are now grouped into CSS shorthand for shorter transform strings:
- Layout
createLayout()now accepts anidparameter
- Exports
globalsis now exported from the main module entry pointforEachChildren,addChild,removeChildhelpers are now exported fromutils
Bug Fixes and improvements
- JS Animation
revert()now restores object properties and DOM attributes to their original pre-animation values, in addition to CSS styles and transforms (previously only CSS styles and transforms were reverted, leaving animated object props and attributes at their last animated value). The publiccleanInlineStyles()utility keeps its original behavior and only clears inline styles and transforms.- Fix
getOriginalAnimatableValuenot storing the original inline value for object properties and DOM attributes, preventing proper revert
- morphTo
- Fix chaining in keyframe arrays and timelines producing incorrect intermediate shapes
- Chainable utils
- Fix accessing non-existent chainable methods throwing an error instead of returning
undefined
- Fix accessing non-existent chainable methods throwing an error instead of returning
- splitText
- Fix
addEffect()returningundefinedinstead ofthiswhen the effect argument is not a function
- Fix
- Layout
- Fix scroll-controlled layout animations not properly calling
onCompleteandonPausecallbacks
- Fix scroll-controlled layout animations not properly calling
- keepTime
- Fix
_startTimenot being preserved when reconstructing tracked animations, causing timing jumps on effect refresh
- Fix
Changes
- Engine
- DevTools integration (
AnimeJSDevTools) removed - Render loop performance: inline closures in
tick()andrender()extracted to module-scope functions to avoid allocation every frame - Tween composition is now resolved before computing
to/from/duration/delayvalues, so the previous sibling tween is available to function-based value callbacks
- DevTools integration (
- splitText
- Type annotation for
splitText()andTextSplittertarget parameter widened fromHTMLElementtoElement
- Type annotation for
- Tween value chaining
- Each tween now pre-computes and stores its end value at construction time
- Enables function-based values like
morphToandscrambleTextto read the previous tween's end value when used in keyframe arrays or timelines
- morphTo
- Now properly chains in keyframe arrays and timelines by reading the previous tween's computed end value instead of mutating the target element with a Symbol
- Editor integration (π)
- New
globals.editorhook system allowing an external editor to interceptanimate()andcreateTimeline()calls
- New
v4.3.6
Bug Fixes
- Auto Layout
- Fix auto layout not properly synced with onScroll, allowing controlling layout animations like this:
layout.animate({
autoplay: onScroll({
sync: true,
})
});v4.3.5
Bug Fixes
- Auto Layout
- Fix a regression introduced in v4.3.2 that prevented inline element to be animated in some cases.
- Animation
- Fix a regression introduced in v4.3.0 that prevented CSS computed style of
backgroundto be correctly interpreted as a color value (#1136).
- Fix a regression introduced in v4.3.0 that prevented CSS computed style of
v4.3.4
v4.3.3
Improvements
-
Refresh
- Function-based "from" values now refresh correctly when calling
.refresh() - Unit conversion (e.g.,
svhtorem) is recalculated on refresh
- Function-based "from" values now refresh correctly when calling
-
onScroll
- Add
onResizecallback that triggers when the scroll container refreshes due to a resize event
- Add
Documentation
-
Playback
- Add missing
tl.backward/anim.backward/time.backwardproperty doc
- Add missing
-
Easing
- Add an opacity animation preview to the easing functions editor
v4.3.2
Bug Fixes
- Layout
- Fix an issue where inline tags, like or weren't detected when surrounded by comments (again)
v4.3.1
Bug Fixes
- Layout
- Fix an issue where inline tags, like or weren't detected when surrounded by comments
v4.3.0
New Features
- AutoLayout
- New
createLayout()method to easily animate between two layout states (learn more about layouts here: https://animejs.com/documentation/layout)
- New
- Easings
- The
easeparameter now accepts function-based values (likedurationanddelayproperties)
- The
- Timeline
- Add
compositionparameter to disable animation composition when using.add()and greatly improve performance
- Add
Bug Fixes
- JS Animation
- Fix an issue where complex values containing a color (e.g.,
box-shadow) would be incorrectly handled as color values instead of complex string values
- Fix an issue where complex values containing a color (e.g.,
- WAAPI
- Fix animations not being properly removed from
document.timelinein some cases
- Fix animations not being properly removed from
- Draggable
- Fix spring parameters not properly setting the duration
- Timeline
- Fix spring easing being ignored when defined in the
defaultsparameter - Fix
.call()and.sync()incorrectly inheritingdelayfromdefaultsparameters
- Fix spring easing being ignored when defined in the
- splitText
- Fix a bug where the first word of the second line could be incorrectly added to the first line
- Fix unnecessary empty spaces not being properly removed from lines
Changes
- Engine
- Increase max fps to 240 (previously 120)
- Animation / Timer / Timeline
- Add
muteCallbacksparameter to.complete(muteCallbacks)to complete the animation without triggering callbacks