JavaScript animation engine
npm install @sherifmagdy/animejs
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
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
``
