• [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)

• [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)

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

• [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

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

You can test it with

npm install animejs@beta

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

• [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

• [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

• [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)

• Fix a bug where the cleanup function returned by split.addEffect() was called after the split html reset when using .refresh()

• Tweak morphTo description #1049
• Add missing utils import in Stagger grid axis #1048

• StaggerParameters → StaggerParams

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

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

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.

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

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();

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
  })
})

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' })
})

• 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

• Various bug fixes, copy and design tweaks

• Fixes floating point inaccuracies with .stretch(). (#1005)

• 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)

• 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)

• 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)

• Added Draggable params to exported types #969 by @AdeboyeDN. (#1004)

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

I'm still finalizing the release notes as there are MANY changes, but in the meantime, you can check out the brand new documentation here.

The brand new Anime.js.

Every Anime.js feature is now exported as an ES Module. This is great for tree shaking, you don't have to ship the entire library anymore, only what you need.

The anime(parameters) function has been replaced with the animate(targets, parameters) module. The targets parameter has been replaced with a dedicated function parameter: animate(targets, parameters).

V3:

import anime from 'animejs';

const animation = anime({
  targets: 'div',
  translateX: 100,
});

V4:

import { animate } from 'animejs';

const animation = animate('div', {
  translateX: 100,
});

The ease prefix has been removed: 'easeInOutQuad' -> 'inOutQuad'.

Callbacks have have been renamed like this:

• begin() -> onBegin()
• update() -> onUpdate()

Here's all the change to the API

- import anime from 'animejs';
+ import { animate, createSpring, utils } from 'animejs';

- anime({
-   targets: 'div',
+ animate('div', {
    translateX: 100,
      rotate: {
-     value: 360,
+     to: 360,
-     easing: 'spring(.7, 80, 10, .5)',
+     ease: createSpring({ mass: .7, damping: 80, stiffness: 10, velocity: .5}),
    },
-   easing: 'easeinOutExpo',
+   ease: 'inOutExpo',
-   easing: () => t => Math.cos(t),
+   ease: t => Math.cos(t),
-   direction: 'reverse',
+   reversed: true,
-   direction: 'alternate',
+   alternate: true,
-   loop: 1,
+   loop: 0,
-   round: 100,
+   modifier: utils.round(2),
-   begin: () => {},
+   onBegin: () => {},
-   update: () => {},
+   onUpdate: () => {},
-   change: () => {},
+   onRender: () => {},
-   changeBegin: () => {},
-   changeComplete: () => {},
-   loopBegin: () => {},
-   loopComplete: () => {},
+   onLoop: () => {},
-   complete: () => {},
+   onComplete: () => {},
  });

No more .finished property, promises are now handled directly with animation.then():

- import anime from 'animejs';
+ import { animate, utils } from 'animejs';

- anime({ targets: target, prop: x }).finished.then(() => {});
+ animate(target, { prop: x }).then(() => {});

The object syntax value property has been renamed to:

- translateX: { value: 100 }
+ translateX: { to: 100 }

The new default easing is 'outQuad' instead of 'easeOutElastic(1, .5)'.

In V3 all animations coexist and overlaps with each other. This can cause animations with the same targets and animated properties to create weird results. V4 cancels a running tween if a new one is created on the same target with the same property. This behaviour can be confifugred using the new composition parameter.

composition: 'none' // The old V3 behaviour, animations can overlaps composition: 'replace' // The new V4 default composition: 'add' // Creates additive animations by adding the values of the currently running animations with the new ones

The round parameter has been replaced with a more flexible parameters that allows you to define custom functions to transform the numerical value of an animation just before the rendering.

- round: 100
+ modifier: utils.round(2)

You can of course defines your own modifier functions like this:

const animation = animate('div', {
  translateX: '100rem',
  modifier: v => v % 10 // Note that the unit 'rem' will automatically be passed to the rendered value
});

The direction parameter has been replaced with an alternate and reversed parameters

V3:

const animation = anime({
  targets: 'div',
  direction: 'reverse',
  // direction: 'alternate' It wasn't possible to combined reverse and alternate direction before
});

V4:

import { animate } from 'animejs';

const animation = animate('div', {
  translateX: 100,
  reversed: true,
  alternate: true,
});

- import anime from 'animejs';
+ import { createTimeline, stagger } from 'animejs';

- anime.timeline({
+ createTimeline({
-   duration: 500,
-   easing: 'easeInOutQuad',
+   defaults: {
+     duration: 500,
+     ease: 'inOutQuad',
+   }
-   loop: 2,
+   loop: 1,
- }).add({
-   targets: 'div',
+ }).add('div', {
    rotate: 90,
  })
- .add('.target:nth-child(1)', { opacity: 0, onComplete }, 0)
- .add('.target:nth-child(2)', { opacity: 0, onComplete }, 100)
- .add('.target:nth-child(3)', { opacity: 0, onComplete }, 200)
- .add('.target:nth-child(4)', { opacity: 0, onComplete }, 300)
+ .add('.target', { opacity: 0, onComplete }, stagger(100))

- import anime from 'animejs';
+ import { animate, stagger } from 'animejs';

- anime({
-   targets: 'div',
+ animate('div', {
-   translateX: anime.stagger(100),
+   translateX: stagger(100),
-   delay: anime.stagger(100, { direction: 'reversed' }),
+   translateX: stagger(100, { reversed: true }),
  });

- import anime from 'animejs';
+ import { animate, svg } from 'animejs';

- const path = anime.path('path');
+ const { x, y, angle } = svg.createMotionPath('path');

- anime({
-   targets: '#shape1',
+ animate('#shape1', {
-   points: '70 41 118.574 59.369 111.145 132.631 60.855 84.631 20.426 60.369',
+   points: svg.morphTo('#shape2'),
-   strokeDashoffset: [anime.setDashoffset, 0],
+   strokeDashoffset: svg.drawLine(),
-   translateX: path('x'),
-   translateY: path('y'),
-   rotate: path('angle'),
+   translateX: x,
+   translateY: y,
+   rotate: angle,
  });

- import anime from 'animejs';
+ import { utils } from 'animejs';

- const value = anime.get('#target1', 'translateX');
+ const value = utils.get('#target1', 'translateX');

- anime.set('#target1', { translateX: 100 });
+ utils.set('#target1', { translateX: 100 });

- anime.remove('#target1');
+ utils.remove('#target1');

- const rounded = anime.round(value);
+ const rounded = utils.round(value, 0);

- import anime from 'animejs';
+ import { engine } from 'animejs';

- anime.suspendWhenDocumentHidden = false;
+ engine.pauseWhenHidden = false;

- anime.speed = .5;
+ engine.playbackRate = .5;

Major performance boost and lower memory footprint. V4 has bee re-written from scratch by keeping performance in mind at every steps.

The tween system has been refactored to improve animations behaviours when they overlaps. This fix lots of issues, especially when creating multiple animations with the same property on the same target.

You can also blend animations together with the new composition: 'add' parameter.

• Child animations can new be looped and reversed
• Add supports for labels
• Add supports for .set() in timeline
• New position operators for more flexibility
• Multi-target child animation can be positioned using the stagger function
• Easier children defaults configuration
• Greatly improved support for CSS transforms composition from one child animation to another

const tl = createTimeline({
  playbackRate: .2,
  defaults: {
    duration: 500,
    easing: 'outQuad',
  }
});

tl.add('START', 100) // Add a label a 100ms
  .set('.target', { opacity: 0 })
  .add('.target', {
    translateY: 100,
    opacity: 1,
    onComplete: () => {},
  }, stagger(100))
  .add('.target', {
    scale: .75,
  }, 'START')
  .add('.target', {
    rotate: '1turn',
  }, '<<+=200')

You can now use CSS variables directly like any other property:

// Animate the values of the CSS variables '--radius'
animate('#target', { '--radius': '20px' });

Animate from a value

+ translateX: { from: 50 }

Even if the [from, to] shortcut is still valid in V4, you can now also write it like this:

+ translateX: { from: 50, to: 100 }

You can now animate hex colors with an alpha channel like '#F443' or '#FF444433'.

You can now create timers with the createTimer module.

Timers can be use as replacement for setTimeoutor setInterval but with all the playbacks parameters, callbacks and the Promise system provided by anime.js.

const interval = createTimer({
  onLoop: () => { // do something every 500ms },
  duration: 500,
});

const timeout = createTimer({
  onComplete: () => { // do something in 500ms },
  duration: 500,
});

const gameLogicLoop = createTimer({
  frameRate: 30,
  onUpdate: gameSystems,
});

const gameRenderLoop = createTimer({
  frameRate: 60,
  onUpdate: gameRender,
});

You can now change the frame rate to all animations or to a specific Timeline / Animation / Timer

• Fix wrong expo easing calculation #591

• Add "remove" method on instance #635
• (Re) Add easeOutIn easing function #684

• 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

• Fix ranged staggering example #704
• Better Elastic easings explanations #694
• Cleanup examples