anime.js

JavaScript animation engine | animejs.com

Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API.

It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

Getting started | Documentation | Demos and examples | Browser support

Getting started

$3

Via npm

``bash
$ npm install @sherifmagdy/animejs --save
`

Via yarn

`bash
$ yarn add @sherifmagdy/animejs
`

or manual download.

$3

#### ES6 modules

`javascript
import anime from '@sherifmagdy/animejs';
`

#### CommonJS

`javascript
const { default: anime } = require('@sherifmagdy/animejs');
`

#### Classic ES5 file include

Link anime.browser.min.js in your HTML :

`html


`

#### Using a CDN

`html


`

In case you are using modules in the browser:

`html

`

$3

- Improving timeline's add method to accept anime instance, timeline, function and instance parameters.
- Add call method to the timeline.
- Add kill method to anime instance and timeline.
- Add speed method to anime instance and timeline.
- restart, seek, play, pause, reverse, remove methods are now chainable in addition to speed and call methods.
- Add a reversed instance or timeline to a normal timeline.
- Add addMark() and removeMark() methods to the timeline.
- seek() method and time offset parameter are now supporting adding a mark's name or a percentage of the duration as a string.

##### Sandbox demo to highlight the powerful of the new features here

$3

#### call ( callback :Function ) : self

Adds a callback to the timeline which gets executed at creation.

`javascript
//simple example to show a 3d object in 3d space follows an empty helper

const 3dObject = { x: 1 , ...};
const 3dHelper = { x: 3 , ...};

const tl = anime
.timeline({
targets: 3dObject
})
.add({
x: 3dHelper.x, // translate the 3dObject's x position to 3
})
.call(() => {
3dHelper.x = 5; // then change the helper's x position to 5
})
.add({
x: 3dHelper.x // translate the 3dObject's x position to 5
});

// we could NOT use begin or complete properties because the callback appended to them won't execute at creation of the timeline.
`

#### kill () :undefined

Kills the anime instance (or timeline), so that the instance is eligible for garbage collection.

`javascript
const instance = anime({
targets: '.class',
translateX: '+=100',
complete: (ins) => ins.kill(),
});
`

#### speed (multiplier :Number) :self

Controls the animation speed, where ( multiplier= 0.5 ) means half speed, ( multiplier= 2 ) double speed.

`javascript
const instance = anime(...);

//Adjust the animation speed
instance.speed(2.5);
`

#### addMark (name :String) :self

Adds a mark at particular position in the timeline.

`javascript
const instance = anime
.timeline({
targets: '#elementID',
})
.add({ translateY: 200 })
.addMark('startScale')
.add({ scaleX: 0.5 }, 'startScale')
.add({ scaleY: 0.7 }, 'startScale');
`

#### removeMark (name :String) :self

Removes a predefined mark from the timeline.

`javascript
const instance = anime
.timeline({
targets: '#elementID',
complete: (tl) => tl.removeMark('startRotate'), // removes the mark after the animation complete
})
.add({ translateY: 200 })
.addMark('startScale')
.add({ scaleX: 0.5 }, 'startScale')
.addMark('startRotate')
.add({ rotateX: '50deg' }, 'startRotate');
`

$3

`javascript
anime({
targets: 'div',
translateX: 250,
rotate: '1turn',
backgroundColor: '#FFF',
duration: 800,
});
`

$3

add() method in the timeline

`javascript
const instance = anime({
targets: 'div',
translateX: 250,
});

const tl = anime
.timeline({
targets: '.class',
})
.add({
rotateZ: '2turn',
})
.add(instance); // adding an instance to the timeline

const anotherTl = anime
.timeline({
targets: '.anotherClass',
})
.add(tl) // adding a timeline to the another timeline
.addMark('MARK')
.add(() => {
//do something in this particular time
}) // adding a function to get executed in this position in the timeline
.add(
{
scaleY: 0.4,
},
'MARK'
);

//You can add a reversed animation to a normal timeline
const reversedTl = anotherTl.reverse();
const normalTl = anime.timeline(...).add(reversedTl); //can be useful in many cases
`

seek() method & time offset parameter

`javascript
const tl = anime
.timeline(...)
.add({ translateY : 200 })
.addMark('scale')
.add({scaleX : 1.2} , 'scale') // starts at the same time of the mark ('scale')
.add({scaleY: 0.3} ,'scale'); // starts at the same time of the mark ('scale')

tl.seek('scale'); // seek to a specefic position
//OR
tl.seek('32%') //Use a percentage
``

Documentation

- Targets
- Properties
- Property parameters
- Animation parameters
- Values
- Keyframes
- Staggering
- Timeline
- Controls
- Callbacks and promises
- SVG Animations
- Easing functions
- Helpers

Demos and examples

- CodePen demos and examples
- Sandbox demo
- juliangarnier.com
- animejs.com
- Moving letters by @tobiasahlin
- Gradient topography animation by @crnacura
- Organic shape animations by @crnacura
- Pieces slider by @lmgonzalves
- Staggering animations
- Easings animations
- Sphere animation
- Layered animations
- anime.js logo animation

Browser support

| Chrome | Safari | IE / Edge | Firefox | Opera |
| ------ | ------ | --------- | ------- | ----- |
| 24+ | 8+ | 11+ | 32+ | 15+ |

Website | Documentation | Demos and examples | MIT License | © 2024 Sherif Magdy.