Animo.js is a powerful Javascript animation library that works with CSS3 attributes, SVG, DOM elements and JS objects to create a variety of high performance, smooth transition animations.

The installation

npm install animejsbower install animejs
Copy the code

Introduce the animo.min.js file into the page.

<script type="text/javascript" src="js/anime.min.js"></script>
Copy the code

HTML structure

The plugin uses the anime() method to construct an instance of an object, passing in the desired parameters as json objects:

var myAnimation = anime({  targets: ['.blue'],  translateX: '13rem',  rotate: 180,  borderRadius: 8,  duration: 2000,  loop: true});
Copy the code

Configuration parameters

Parameter Usage Tutorial

Targets for animation

CSS selectors

“Do not use pseudo-elements”

anime({  targets: '.css-selector-demo .el',  translateX: 250});
Copy the code

DOM element/element sequence

Use DOM nodes or collections of nodes as animate targets

var elements = document.querySelectorAll('.dom-node-demo .el'); anime({ targets: elements, translateX: 270});Copy the code

JAVASCRIPT object

Animate a JavaScript object that must have at least one numeric attribute.

var logEl = document.querySelector('.battery-log'); var battery = { charged: '0%', cycles: 120}anime({ targets: battery, charged: '100%', cycles: 130, round: 1, easing: 'linear', update: function() { logEl.innerHTML = JSON.stringify(battery); }});Copy the code

An array of

Animate an array as the target.

var el = document.querySelector('.mixed-array-demo .el-01'); anime({ targets: [el, '.mixed-array-demo .el-02', '.mixed-array-demo .el-03'], translateX: 250});Copy the code

Animatable target properties

  1. Animate the TARGET’s CSS properties.

“Most CSS properties cause layout changes or redraws and can cause unstable animations. Therefore, prioritize opacity and CSS transforms whenever possible.”

  1. Animates the TRANSFORMS properties of CSS.

Transforms properties

  1. JAVASCRIPT object properties

Any Object property that contains a numeric value can be animated.

  1. DOM attributes

Any DOM property that contains a numeric value can be animated.

  1. The SVG attribute

Like any other DOM property, all SVG properties that contain at least one value can be animated.

Basic animation parameters

  1. DURAION (Duration)

Defines the duration of the animation in milliseconds.

  1. DELAY = DELAY

Defines the delay for the animation in milliseconds.

  1. ENDDELAY (terminal delay)

Add some extra time in milliseconds at the end of the animation.

  1. EASING (Time curve)

Define the time curve of the animation.

  1. ROUND (digital format)

Round the value up to x decimal.

  1. Special attributes

Define specific parameters for each property of the animation using Object as a value. Other properties not specified in Object inherit the autonomous animation.

  1. The FUNCTION parameters

Set different values for each target and property of the animation. Function takes three arguments:

ARGUMENTS

INFOS

target

The current animation target element

index

Index of the animated target

targetsLength

Total animation targets

anime({  targets: '.function-based-params-demo .el',  translateX: 270,  direction: 'alternate',  loop: true,  delay: function(el, i, l) {    return i * 100;  },  endDelay: function(el, i, l) {    return (l - i) * 100;  }});
Copy the code

Direction and circulation

  1. DIRECTION = DIRECTION

Define the direction of the animation.

ACCEPTS

INFOS

normal

Positive direction animation

reverse

Inverse animation

alternate

Back and forth

  1. LOOP (LOOP)

Defines the number of iterations of the animation.

ACCEPTS

INFOS

Number

cycles

true

An infinite loop

  1. AUTOPLAY

Defines whether the animation should start automatically.

ACCEPTS

INFOS

true

Enable auto Play

false

Turn off auto play

Animation assignment

  1. Unitless value

If the original value has units, it is automatically added to the animated value.

  1. Unit value

Forces the animation to use a unit and automatically converts the initial target value.

  1. The relative value

Add, subtract, or multiply the original value.

ACCEPTS

EFFECT

EXAMPLE

‘+ =’

Add

‘+ = 100’

‘- =’

Substract

‘-=2turn’

‘* =’

Multiply

‘* = 10’

  1. color

Animo.js accepts and converts Haxadecimal(hexadecimal), RGB, RGBA, HSL and HSLA color values.

  1. Set the initial value of the animation

Forces the animation to start with the specified value.

  1. Function returns a value

Set different values for each target and property of the animation.

ARGUMENTS

INFOS

target

The current animation target element

index

Index of the animated target

targetsLength

Total animation targets

Key frames (KEYFRAMES)

  1. Animation keyframe

Animation keyframes are defined using an array in the KeyFrames property.

“If a duration is not specified within the keyframe, the duration of each keyframe will be equal to the total duration of the animation divided by the number of keyframes.”

anime({  targets: '.animation-keyframes-demo .el',  keyframes: [    {translateY: -40},    {translateX: 250},    {translateY: 40},    {translateX: 0},    {translateY: 0}  ],  duration: 4000,  easing: 'easeOutElastic(1, .8)',  loop: true});
Copy the code
  1. Property keyframe

Like animation keyframes, property keyframes are defined using an Array of property objects. Attribute keyframes allow overlapping animations because each attribute has its own array of keyframes.

The animation control

  1. PLAY/PAUSE

Plays the paused animation, and if the autoplay parameter is set to false, the animation is started.

animation.play(); animation.pause();Copy the code
  1. RESTART (start again)

Restart the animation from its initial value.

animation.restart();
Copy the code
  1. The REVERSE direction

Reverse the direction of the animation.

animation.reverse();
Copy the code
  1. SEEK (transient)

Jump to a specific time in milliseconds.

animation.seek(timeStamp);
Copy the code

  1. Timeline control Timeline control is the same as animation control.

    timeline.play(); timeline.pause(); timeline.restart(); timeline.seek(timeStamp);

Time curve (EASING)

  1. uniform

Do not apply any easing time curves to the animation. Useful for opacity and colors transitions.

easing: 'linear'
Copy the code

  1. Is not uniform

    easing: ‘easeInOutSine’

  2. Three bessels

Use your own custom cubicBezier curves for cubicBezier(x1, y1, x2, y2).

easing: 'cubicBezier(.5, .05, .1, .3)'
Copy the code
  1. SPRING

It’s kind of a spring effect

easing: 'spring(mass, stiffness, damping, velocity)'
Copy the code
  1. bounce

Bounce effect

easing: 'easeOutElastic(amplitude, period)'
Copy the code

  1. A step defines the number of jumps required for an animation to reach its end value.

    easing: ‘steps(numberOfSteps)’

  2. The custom

Returns a custom time curve function based on function based value.

easing: function() { return function(time) { return time * i} }
Copy the code

ANIME. JS method

  1. Delete the target

Removes a target from a running animation or timeline. The targets parameter accepts the same value as the targets property.

anime.remove(targets)
Copy the code
  1. Get the value

Returns the original value of the element.

anime.get(target, propertyName, unit);
Copy the code
  1. The set value

Immediately sets the value to the specified target.

anime.set(targets, {property: value});
Copy the code
  1. The random number

Returns a random integer in a specified range. anime.random(minValue, maxValue);

  1. TICK

Loop the animation using an external requestAnimationFrame. “Don’t forget to set the autoplay parameter to false to prevent animo.js’s built-in RAF loop from starting.”

animation.tick(time)
Copy the code
  1. Running object

Returns an Array of all active animo.js instances that are currently running.

anime.running
Copy the code

“Thank you for reading. Please read the full documentationAnimo.js official website document”