github juliangarnier/anime 4.0.0
v4.0.0
on GitHub

latest releases: v4.0.1, v4.0.0
7 days ago

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.

API Breaking changes

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.

Animation

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

Easings names

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

Callbacks

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: () => {},
  });

Promises

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(() => {});

Values

To

The object syntax value property has been renamed to: 

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

Animation parameters

Default easing

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

composition

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

round -> modifier

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

Playback parameters

direction

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

Timelines:

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

Stagger

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

SVG

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

Utils

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

Engine

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

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

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

Improvements

Performances

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

Better tween composition

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.

Additive animations

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

Improved Timelines

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

Properties

CSS Variables

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

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

Animating from

Animate from a value 

+ translateX: { from: 50 }

From -> To

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

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

Colors

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

Timers

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

Variable frame rate

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

Check out latest releases or
releases around juliangarnier/anime 4.0.0

Don't miss a new anime release

NewReleases is sending notifications on new releases.

Get notifications