• 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

Bug fixes

• Fix wrong expo easing calculation #591

Improvements

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

Bug fixes

• 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

Docs

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

Improvements

• Add matrix and matrix3d parameters to allow the use of matrix values in CSS Transforms #636
• Change steps easing behaviour to match jump-start CSS timing function #625

Bug fixes

• Fix (again) a bug where the animation will "flick" on reverse #623 #586 #503 #577

Improvements

• Add support for values with exponent (-1.12742e-12) #552
• Easing functions refactoring + added Bounce easing

Bug fixes

• Fix wrong unit detection when a value contains spaces #502
• Fix a bug where the parent of responsive SVG path was not properly set #556
• Fix a bug where the animation will "flick" on reverse #512
• Fix a bug where loopBegin callback could be called just before animation complete
• Update anime.running reference when clearing array on visibility change #560, #466
• Update ES6 module instal path #588, #527, #590

Bug fixes

• Fix ReferenceError on document when running anime.js on the server #472 #481 #345
• Fix a bug that prevented complete callback to be called again when re-playing the animation #483 #373 #378 #392 #408
• Fix a bug triggering a TL promise instantly #159

New features

• New easings: spring(mass, stiffness, damping, velocity) and steps(x)
• Add endDelay parameter
• New keyframes system
• New staggering helper
• New callbacks: loopBegin(), loopComplete(), changeBegin(), change() and changeComplete()
• Automatic CSS units conversion
• Responsive motion path animation
• New set() helper to apply values instantly to multiple targets
• ES6 Modules and new build process
• New documentation
• A website.

Bug fixes

• No need to re-define a transform property when animating multiple transforms on the same target in a timeline
• Improved simultaneous animations on the same target #257
• Allow remove() to remove targets from timeline #318 #286
• Reversed animations can now be delayed using endDelay #254
• Better inline style unit handling (check inline style before getComputedStyle) #251
• SVG scale property is no longer overridden by CSS transform scale #316
• Fix Uncaught “TypeError: Cannot read property 'targets' of undefined” when there are no TL parameters object specified #341
• Fix a bug that prevented specific HTML ids selectors to be selected (HEX colours) #281
• Fix wrong initial SVG transform value in some cases #340

API changes

• run() callback has been replaced by change()
• animations are now paused when tab of window is not active
• getValue() has been replaced by get()
• Cubic Bézier curves are now defined using a string ‘cubicBezier(x1,y1,x2,y2)’ instead of an array
• Timeline offset property has been replaced by timelineOffset #229
• Timeline offset can be set as a second argument inside .add()

Improvements

• Performances boost, up to 1.5 faster 🔥
• Add support for RGBA and HSLA colors animations

Bug fixes

• Fix timeline children begin() callback
• Fix a bug where some timeline durations weren’t properly calculated
• Fix a bug where anime.path() initial values weren’t properly set #245
• Fix a bug where percentage unit starting values were miscalculated #238
• begin() and complete() callbacks are now called instantly if duration is 0