Anime
(/ˈæn.ə.meɪ/)
is a lightweight JavaScript animation library. It works with any CSS Properties, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects.
- Keyframes: Chain multiple animation properties.
- Timeline: Synchronize multiple instances together.
- Playback controls: Play, pause, restart, seek animations or timelines.
- CSS transforms: Animate CSS transforms individually.
- Function based values: Multiple animated targets can have individual value.
- SVG Animations: Motion path, line drawing and morphing animations.
- Easing functions: Use the built in functions or create your own Cubic Bézier curve easing.
Chrome | Safari | IE / Edge | Firefox | Opera |
---|---|---|---|---|
24+ | 6+ | 10+ | 32+ | 15+ |
$ npm install animejs
# OR
$ bower install animejs
import anime from 'animejs'
Or manually download and link anime.min.js
in your HTML:
<script src="anime.min.js"></script>
Then start animating:
anime({
targets: 'div',
translateX: [
{ value: 100, duration: 1200 },
{ value: 0, duration: 800 }
],
rotate: '1turn',
backgroundColor: '#FFF',
duration: 2000,
loop: true
});
The targets
property defines the elements or JS Object
s to animate.
Types | Examples |
---|---|
CSS Selectors | 'div' , '.item' , 'path' , '#el path' ... |
DOM Element | document.querySelector('.item') |
NodeList | document.querySelectorAll('.item') |
Object |
{prop1: 100, prop2: 200} |
Array |
['div', '.item', domNode] |
Types | Examples |
---|---|
CSS | opacity , backgroundColor , fontSize ... |
Transforms | translateX , rotate , scale ... |
Object properties | Any Object property containing numerical values |
DOM attributes | Any DOM attributes containing numerical values |
SVG attributes | Any SVG attributes containing numerical values |
➜ Animatable properties examples
Any CSS properties can be animated:
anime({
targets: 'div',
left: '80%', // Animate all divs left position to 80%
opacity: .8, // Animate all divs opacity to .8
backgroundColor: '#FFF' // Animate all divs background color to #FFF
});
CSS transforms can be animated individually:
anime({
targets: 'div',
translateX: 250, // Animate all divs translateX property to 250px
scale: 2, // Animate all divs scale to 2
rotate: '1turn' // Animate all divs rotation to 1 turn
});
Any Object
property containing a numerical value can be animated:
var myObject = {
prop1: 0,
prop2: '0%'
}
anime({
targets: myObject,
prop1: 50, // Animate the 'prop1' property from myObject to 50
prop2: '100%' // Animate the 'prop2' property from myObject to 100%
});
Any DOM Attribute containing a numerical values can be animated:
<input value="0">
anime({
targets: input,
value: 1000, // Animate the input value to 1000
round: 1 // Remove decimals by rounding the value
});
Any SVG Attribute containing a numerical values can be animated:
<svg width="128" height="128" viewBox="0 0 128 128">
<polygon points="64 68.73508918222262 8.574 99.9935923731656 63.35810017508558 67.62284396863708 64 3.993592373165592 64.64189982491442 67.62284396863708 119.426 99.9935923731656"></polygon>
</svg>
anime({
targets: 'polygon',
points: '64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96'
});
Defines duration, delay and easing for each property animations.
Can be set globally, or individually to each properties:
Names | Defaults | Types | Info |
---|---|---|---|
duration | 1000 |
number , function |
millisecond |
delay | 0 |
number , function |
millisecond |
easing | 'easeOutElastic' |
function |
See Easing functions |
elasticity | 500 |
number , function |
Range [0 - 1000] |
round | false |
number , boolean , function |
Power of 10 |
anime({
translateX: {
value: 250,
duration: 800
},
rotate: {
value: 360,
duration: 1800,
easing: 'easeInOutSine'
},
scale: {
value: 2,
duration: 1600,
delay: 800,
easing: 'easeInOutQuart'
},
delay: 250 // All properties except 'scale' inherit 250ms delay
});
➜ Property parameters examples
Get different property parameters for every target of the animation.
The function accepts 3 arguments: target
, index
, targetsLength
.
anime({
targets: 'div',
translateX: 250,
rotate: 180,
duration: function(target) {
// Duration based on every div 'data-duration' attribute
return target.getAttribute('data-duration');
},
delay: function(target, index) {
// 100ms delay multiplied by every div index, in ascending order
return index * 100;
},
elasticity: function(target, index, totalTargets) {
// Elasticity multiplied by every div index, in descending order
return 200 + ((totalTargets - index) * 200);
}
});
➜ Function based parameters examples
Parameters relative to the animation to specify the direction, the number of loops or autoplay.
Names | Defaults | Types |
---|---|---|
loop | false |
number , boolean |
direction | 'normal' |
'normal' , 'reverse' , 'alternate' |
autoplay | true |
boolean |
anime({
targets: 'div',
translateX: 100,
duration: 2000,
loop: 3, // Play the animation 3 times
direction: 'reverse', // Play the animation in reverse
autoplay: false // Animation paused by default
});
➜ Animation parameters examples
Defines the end value of the animation.
Start value is the original target value, or default transforms value.
Types | Examples | Infos |
---|---|---|
Number | 100 |
Automatically add original or default unit if needed |
String | '10em' , '1turn' , 'M21 1v160' , '50%' |
Must contains at least one numerical value |
Relative values | '+=100px' , '-=20em' , '*=4' |
Add, subtract or multiply the original property value |
Colors | '#FFF' , 'rgb(255,0,0)' , 'hsl(100, 20%, 80%)' |
Accepts 3 or 6 hex digit, rgb, or hsl values |
anime({
targets: 'div',
translateX: 100, // Add 'px' by default (from 0px to 100px)
rotate: '1turn', // Use 'turn' as unit (from 0turn to 1turn)
scale: '*=2', // Multiply the current scale value by 2 (from 1 to (1 * 2))
backgroundColor: '#FFF', // Animate the background color to #FFF (from 'rgb(0,0,0)' to 'rgb(255,255,255)')
duration: 1500
});
Force the animation to start at a certain value.
anime({
targets: 'div',
translateX: [100, 200], // Translate X from 100 to 200
rotate: ['.5turn', '1turn'], // Rotate from 180deg to 360deg
scale: ['*=2', 1], // Scale from 2 times the original value to 1,
backgroundColor: ['rgb(255,0,0)', '#FFF'], // Will transition the background color from red to white
duration: 1500
});
➜ Specific initial value example
Same as function based property parameters.
Get different values for every target and property of the animation.
The function accepts 3 arguments: target
, index
, targetsLength
.
anime({
targets: 'div',
translateX: function(el) {
return el.getAttribute('data-x');
},
translateY: function(el, i) {
return 50 + (-50 * i);
},
scale: function(el, i, l) {
return (l - i) + .25;
},
rotate: function() { return anime.random(-360, 360); },
duration: function() { return anime.random(800, 1600); },
delay: function() { return anime.random(0, 1000); }
});
➜ Function based value example
Keyframes are defined using an Array
of property Object.
Instance's duration
is divided by the number of keyframes of each properties if not specified.
anime({
targets: 'div',
translateX: [
{ value: 250, duration: 1000, delay: 500, elasticity: 0 },
{ value: 0, duration: 1000, delay: 500, elasticity: 0 }
],
translateY: [
{ value: -40, duration: 500, elasticity: 100 },
{ value: 40, duration: 500, delay: 1000, elasticity: 100 },
{ value: 0, duration: 500, delay: 1000, elasticity: 100 }
],
scaleX: [
{ value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },
{ value: 1, duration: 900, elasticity: 300 },
{ value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },
{ value: 1, duration: 900, elasticity: 300 }
],
scaleY: [
{ value: [1.75, 1], duration: 500 },
{ value: 2, duration: 50, delay: 1000, easing: 'easeOutExpo' },
{ value: 1, duration: 450 },
{ value: 1.75, duration: 50, delay: 1000, easing: 'easeOutExpo' },
{ value: 1, duration: 450 }
]
});
➜ Specific keyframes properties example
Play animations in sequence by creating a timeline:
var myTimeline = anime.timeline();
A timeline accepts the same parameters as an animation: direction
, loop
and autoplay
.
var myTimeline = anime.timeline({
direction: 'alternate',
loop: 3,
autoplay: false
});
Add animations to the timeline with .add()
:
myTimeline
.add({
targets: '.square',
translateX: 250
})
.add({
targets: '.circle',
translateX: 250
})
.add({
targets: '.triangle',
translateX: 250
});
Access timeline children animations with myTimeline.children
offset
defines the starting time of an animation on the timeline.
Defines starting time relative to the previous animations duration.
Types | Examples | Infos |
---|---|---|
+= |
'+=100' |
Starts 100ms after the previous animation ends |
-= |
'-=100' |
Starts 100ms before the previous animation ends |
*= |
'*=2' |
Starts at 2 times the previous animations duration |
myTimeline
.add({
targets: '.square',
translateX: 250
})
.add({
targets: '.circle',
translateX: 250,
offset: '-=600' // Starts 600ms before the previous animation ends
})
.add({
targets: '.triangle',
translateX: 250,
offset: '-=800' // Starts 800ms before the previous animation ends
});
Defines an absolute starting time on the timeline with a number.
myTimeline
.add({
targets: '.square',
translateX: 250,
offset: 1000 // Starts at 1000ms
})
.add({
targets: '.circle',
translateX: 250,
offset: 500 // Starts at 500ms
})
.add({
targets: '.triangle',
translateX: 250,
offset: 0 // Starts at 0ms
});
Play, pause, restart, seek animations or timelines.
var playPauseAnim = anime({
targets: 'div',
translateX: 250,
direction: 'alternate',
loop: true,
autoplay: false // prevent the instance from playing
});
playPauseAnim.play(); // Manually play
playPauseAnim.pause(); // Manually pause
var restartAnim = anime({
targets: 'div',
translateX: 250,
direction: 'alternate',
loop: true,
autoplay: false
});
restartAnim.restart(); // Restart the animation and reset the loop count / current direction
var reverseAnim = anime({
targets: 'div',
translateX: 250,
direction: 'alternate',
loop: true
});
reverseAnim.reverse(); // Change the animation direction
Change animations or timelines current time.
var seekAnim = anime({
targets: 'div',
translateX: 250,
delay: function(el, i, l) { return i * 100; },
elasticity: 200,
autoplay: false
});
seekAnim.seek(500); // Set the animation current time to 500ms
Execute a function at the beginning, during or when an animation or timeline is completed.
Names | Types | Arguments | Info |
---|---|---|---|
update | function |
animation Object |
Called at time = 0 |
begin | function |
animation Object |
Called after animation delay is over |
complete | function |
animation Object |
Called only after all the loops are completed |
update()
is called on every frame while the instance is playing.
var myAnimation = anime({
targets: '#update .el',
translateX: 250,
delay: 1000,
update: function(anim) {
console.log(anim.currentTime + 'ms'); // Get current animation time with `myAnimation.currentTime`, return value in ms.
console.log(anim.progress + '%'); // Get current animation progress with `myAnimation.progress`, return value in %
}
});
begin()
is called once after the delay is finished.
var myAnimation = anime({
targets: '#begin .el',
translateX: 250,
delay: 1000,
begin: function(anim) {
console.log(anim.began); // true after 1000ms
}
});
Check if the animation has begun with myAnimation.began
, return true
or false
.
run()
is called every frame after the delay is finished.
var myAnimation = anime({
targets: '#run .el',
translateX: 250,
delay: 1000,
run: function(anim) {
console.log(anim.currentTime);
}
});
complete()
is called once after the animation is finished.
var myAnimation = anime({
targets: '#complete .el',
translateX: 250,
complete: function(anim) {
console.log(anim.completed);
}
});
Check if the animation has finished with myAnimation.completed
, return true
or false
.
myAnimation.finished
returns a Promise object which will resolve once the animation has finished running.
Translate and rotate DOM elements along an SVG path:
// Create a path `Object`
var path = anime.path('#motionPath path');
var motionPath = anime({
targets: '#motionPath .el',
translateX: path('x'), // Follow the x values from the path `Object`
translateY: path('y'), // Follow the y values from the path `Object`
rotate: path('angle') // Follow the angle values from the path `Object`
});
Animate the transition between two SVG shapes:
<svg class="shape" width="128" height="128" viewBox="0 0 128 128">
<polygon points="64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100"></polygon>
</svg>
var svgAttributes = anime({
targets: '.shape polygon',
points: '64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96'
});
Shapes need to have the same number of points.
Line drawing animation of an SVG shape:
anime({
targets: '.shape path',
strokeDashoffset: [anime.setDashoffset, 0]
});
The easing
parameter can accept either a string or a custom Bézier curve coordinates (array).
Types | Examples | Infos |
---|---|---|
String | 'easeOutExpo' |
Built in function names |
Array |
[.91,-0.54,.29,1.56] | Custom Bézier curve coordinates ([x1, y1, x2, y2]) |
Linear easing: 'linear'
Penner's equations:
easeIn | easeOut | easeInOut |
---|---|---|
easeInQuad | easeOutQuad | easeInOutQuad |
easeInCubic | easeOutCubic | easeInOutCubic |
easeInQuart | easeOutQuart | easeInOutQuart |
easeInQuint | easeOutQuint | easeInOutQuint |
easeInSine | easeOutSine | easeInOutSine |
easeInExpo | easeOutExpo | easeInOutExpo |
easeInCirc | easeOutCirc | easeInOutCirc |
easeInBack | easeOutBack | easeInOutBack |
easeInElastic | easeOutElastic | easeInOutElastic |
➜ Built in easing functions examples
Usage:
anime({
targets: 'div',
translateX: 100,
easing: 'easeOutExpo' // Default 'easeOutElastic'
});
Elasticity of Elastic easings can be configured with the elasticity
parameters:
anime({
targets: 'div',
translateX: 100,
easing: 'easeOutElastic',
elasticity: 600 // Default 500, range [0-1000]
});
Define a Bézier curve with an Array
of 4 coordinates:
anime({
targets: 'div',
translateX: 100,
easing: [.91,-0.54,.29,1.56]
});
Custom Bézier curves coordinates can be generated here https://matthewlein.com/ceaser/
➜ Custom Bézier curves example
Expand the built in easing functions from anime.easings
.
// Add custom function
anime.easings['myCustomEasingName'] = function(t) {
return Math.pow(Math.sin(t * 3), 3);
}
// Usage
anime({
targets: 'div',
translateX: 100,
easing: 'myCustomEasingName'
});
// add custom Bézier curve function
anime.easings['myCustomCurve'] = anime.bezier([.91,-0.54,.29,1.56]);
// Usage
anime({
targets: 'div',
translateX: 100,
easing: 'myCustomCurve'
});
➜ Custom easing functions example
Change all animations speed (from 0 to 1).
anime.speed = .5; // Slow down all animations by half of their original speed
Return an Array
of all active Anime instances.
anime.running;
Remove one or multiple targets from the animation.
anime.remove('.item-2'); // Remove all elements with the class 'item-2'
Get current valid value from an element.
anime.getValue('div', 'translateX'); // Return '100px'
Create a path Function for motion path animation.
Accepts either a DOM node or CSS selector.
var path = anime.path('svg path', 'translateX'); // Return path(attribute)
An helper for line drawing animation.
Sets the 'stroke-dasharray' to the total path length and return its value.
anime({
targets: '.shape path',
strokeDashoffset: [anime.setDashoffset, 0]
});
Return the complete list of built in easing functions
anime.easings;
Return a custom Bézier curve easing function
anime.bezier(x1, x2, y1, y2); // Return function(t)
Create a timeline to synchronise other Anime instances.
var timeline = anime.timeline();
timeline.add([instance1, instance2, ...]);
Generate a random number between two numbers.
anime.random(10, 40); // Will return a random number between 10 and 40
====
MIT License. © 2017 Julian Garnier.
Thanks to Animate Plus and Velocity that inspired anime.js
API, BezierEasing and jQuery UI for the easing system. Tim Branyen For the Promise implementation.
anime's People
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.