Fixes

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

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

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

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

New Features

• [API] All utils, svg, text and eases objects and methods are now exported by the main module:
  • import { animate, clamp, inOut, splitText, morphTo } from 'animejs'
• [API] All modules can now be imported individually:
  • 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 { onScroll } from 'animejs/events'
  • import { createSpring } from 'animejs/spring'
  • import { engine } from 'animejs/engine'
  • 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'
• [Utils] Add createSeededRandom() to generate pre-seeded pseudo-random functions
• [Utils] Add damp() utils to replace lerp(start, end, amount, clock)

Breaking Changes

• [Utils] Remove the clock parameter from lerp() (use the framerate dependent damping function damp() instead)
• [Utils] Remove interpolate() (use the simplified lerp() instead)
• [Bundle] Replace lib/ with dist/bundles/ and dist/modules/
• [Bundle] Remove lib/anime.iife.min.js (use dist/bundles/anime.umd.min.js instead)

Bug Fixes

• [Draggable] Fix touch dragging with Shadow DOM support (#1067) @wessmeister
• [Types] Add @types/node dependency for type checking (#1069) @Yukiniro

Changes

• [Utils] stagger() has been moved to /utils, still available globally via import { stagger } from 'animejs'
• [Build] Simplify build scripts: build, dev, dev:test, test:browser, test:node, open:examples

Deprecated

• [Text] text.split() deprecated, use splitText() instead

You can test it with

npm install animejs@beta

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

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)