JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Anime

    Javascript Animation Engine
    Filed under 

    • 🔾88%Overall
    • 24,745
    • 6.5 days
    • 🕩1847
    • 👥10

    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

    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)
    

    Motion path example

    anime.setDashoffset(pathEl)

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

    Line drawing example

    anime.easings

    Return the complete list of built in easing functions

    anime.easings;
    

    anime.bezier(x1, x2, y1, y2)

    Return a custom Bézier curve easing function

    anime.bezier(x1, x2, y1, y2); // Return function(t)
    

    anime.timeline()

    Create a timeline to synchronise other Anime instances.

    var timeline = anime.timeline();
    timeline.add([instance1, instance2, ...]);
    

    Timeline examples

    anime.random(x, y)

    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.

    Show All