animated-timeline-fork

v2.2.1

Published

3 years ago

JavaScript animation engine

Downloads

0High
0Medium
0Low

nitin42

anime animation javascript CSS transforms SVG canvas

anime.js

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.

⚠️ Migrating from v1.x ? Make sure to read the changelog ⚠️

Main features

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.

Demos and examples

Browser support

| Chrome | Safari | IE / Edge | Firefox | Opera | | --- | --- | --- | --- | --- | | 24+ | 6+ | 10+ | 32+ | 15+ |

Usage

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

API

Targets

The targets property defines the elements or JS Objects 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]

➜ Targets examples

Animatable properties

| 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

CSS

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 properties example

Individual CSS transforms

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

➜ CSS Transforms example

JavaScript Object properties

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

➜ Object properties example

DOM Attributes

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

➜ DOM Attributes example

SVG Attributes

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

➜ SVG Attributes example

Property parameters

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

Function based property parameters

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

Animation parameters

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

Property values

Single value

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

➜ Values examples

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

From > To values

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

Function based values

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

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

Timeline

Basic timeline

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

➜ Basic timeline example

Timeline animations offsets

offset defines the starting time of an animation on the timeline.

Relative offset

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

➜ Relative offset example

Absolute offset

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

➜ Absolute offset example

Playback controls

Play, pause, restart, seek animations or timelines.

Play / Pause

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

➜ Play / Pause example

Restart

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

➜ Restart example

Reverse

var reverseAnim = anime({
  targets: 'div',
  translateX: 250,
  direction: 'alternate',
  loop: true
});

reverseAnim.reverse(); // Change the animation direction

➜ Reverse example

Seek

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

➜ Seek example

Callbacks

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

➜ Callbacks examples

Update

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

➜ Update example

Begin

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.

➜ Begin example

Run

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

➜ Run example

Complete

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.

➜ Complete example

Promises

myAnimation.finished returns a Promise object which will resolve once the animation has finished running.

➜ Promises example

SVG

Motion path

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

➜ Motion path example

Morphing

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.

➜ Morphing example

Line drawing

Line drawing animation of an SVG shape:

anime({
  targets: '.shape path',
  strokeDashoffset: [anime.setDashoffset, 0]
});

➜ Line drawing example

Easing functions

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

Built in functions

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

➜ Elasticity examples

Custom Bézier curves

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

Defining custom functions

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

Helpers

anime.speed = x

Change all animations speed (from 0 to 1).

anime.speed = .5; // Slow down all animations by half of their original speed

anime.running

Return an Array of all active Anime instances.

anime.running;

anime.remove(target)

Remove one or multiple targets from the animation.

anime.remove('.item-2'); // Remove all elements with the class 'item-2'

anime.getValue(target, property)

Get current valid value from an element.

anime.getValue('div', 'translateX'); // Return '100px'

anime.path(pathEl)

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)