## Targets

### CSS Selector

Can be any CSS selector.

Pseudo elements can't be targeted using JavaScript.

Type | Default | Example
String | `null` | `targets: '.item'`

### DOM Node / NodeList

Can be any DOM Node or NodeList.

Type | Default | Example
DOM Node | `null` | `targets: el.querySelector('.item')`
NodeList | `null` | `targets: el.querySelectorAll('.item')`

### JavaScript Object

A JavaScript Object with at least one property containing a numerical value.

Type | Default | Example
Object | `null` | `targets: myObjectProp`

    {"charged":"0%","cycles":120}

### Array

An array containing multiple targets.

Accepts mixed types. E.g. `['.el', domNode, jsObject]`

Type | Default | Example
Array | `null` | `targets: ['.item', el.getElementById('#thing')]`

## Properties

### CSS Properties

Any CSS properties can be animated.

Most CSS properties will cause layout changes or repaint, and will result in choppy animation. Prioritize opacity and CSS transforms as much as possible.

More details about accepted values in the values section.

Example | value
`opacity` | `.5`
`left` | `'100px'`

### CSS Transforms

Animate CSS transforms properties individually.

It's possible to specify different timing for each transforms properties, more details in the specific property parameters section.

More details about accepted values in the values section.

Valid properties | Default unit
`'translateX'` | `'px'`
`'translateY'` | `'px'`
`'translateZ'` | `'px'`
`'rotate'` | `'deg'`
`'rotateX'` | `'deg'`
`'rotateY'` | `'deg'`
`'rotateZ'` | `'deg'`
`'scale'` | `—`
`'scaleX'` | `—`
`'scaleY'` | `—`
`'scaleZ'` | `—`
`'skew'` | `'deg'`
`'skewX'` | `'deg'`
`'skewY'` | `'deg'`
`'perspective'` | `'px'`

### Object properties

Any Object property containing a numerical value can be animated.
More details about accepted values in the values section.

Example | value
`prop1` | `50`
`'prop2'` | `'100%'`

    {"prop1":0,"prop2":"0%"}

### DOM Attributes

Any DOM Attributes containing a numerical value can be animated.
More details about accepted values in the values section.

Example | value
`value` | `1000`
`volume` | `0`
`data-custom` | `'3 dogs'`

### SVG Attributes

Like any other DOM attributes, all SVG attributes containing at least one numerical value can be animated.
More details about accepted values in the values section and SVG animation in the SVG section.

Example | value
`points` | `'64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100'`
`scale` | `1`
`baseFrequency` | `0`

## Property parameters

### Duration

Defines the duration in milliseconds of the animation.

Type | Default | Example
Number | `1000` | `3000`
anime.stagger | See staggering section | `anime.stagger(150)`
Function | See function based parameters section | `(el, i) => i * 150`

3000 ms

### Delay

Defines the delay in milliseconds of the animation.

Type | Default | Example
Number | `0` | `1000`
anime.stagger | See staggering section | `anime.stagger(150)`
Function | See function based parameters section | `(el, i) => i * 150`

1000 ms

### end delay

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

Type | Default | Example
Number | `0` | `1000`
anime.stagger | See staggering section | `anime.stagger(150)`
Function | See function based parameters section | `(el, i) => i * 150`

1000 ms

### Easing

Defines the timing function of the animation.

Check out the easings section for a complete list of available easing and parameters.

Type | Default | Example
String | `'easeOutElastic(1, .5)'` | `easing: 'easeInOutQuad'`

easeInOutExpo

### Round

Rounds up the value to x decimals.

Type | Default | Example
Number | `0` | `round: 10`

    0

### Specific property parameters

Defines specific parameters to each property of the animation using an Object as value.
Other properties that aren't specified in the Object are inheritted from the main animation.

Type | Example
Object | `rotate: { value: 360, duration: 1800, easing: 'easeInOutSine' }`

### Function based parameters

Get different values for every target and property of the animation.

The function accepts 3 arguments:

Arguments | Infos
`target` | The curent animated targeted element
`index` | The index of the animated targeted element
`targetsLength` | The total number of animated targets

See staggering section for easier values manipulation.

delay = 0 * 100
delay = 1 * 100
delay = 2 * 100

## Animation parameters

### Direction

Defines the direction of the animation.

Accepts | Infos
`'normal'` | Animation progress goes from 0 to 100%
`'reverse'` | Animation progress goes from 100% to 0%
`'alternate'` | Animation progress goes from 0% to 100% then goes back to 0%

normal
reverse
alternate

### Loop

Defines the number of iterations of your animation.

Accepts | Infos
`Number` | The number of iterations
`true` | Loop indefinitely

normal 3 times
reverse 3 times
alternate 3 times
normal inifinite
inifinite reverse
inifinite alternate

### Autoplay

Defines if the animation should automatically starts or not.

Accepts | Infos
`true` | Automatically starts the animation
`false` | Animation is paused by default

autoplay: true
autoplay: false

## Values

### Unitless

If the original value has a unit, it will be automatically added to the animated value.

Type | Example
Number | `translateX: 250`

### Specific unit

Forces the animation to use a certain unit and will automatically convert the initial target value.

Conversion accuracy can vary depending of the unit used.
You can also define the initial value of the animation directly using an array, see the from to values section.

Type | Example
String | `width: '100%'`

### Relative

Adds, substracts or multiplies the original value.

Accepts | Effect | Example
`'+='` | Add | `'+=100'`
`'-='` | Substract | `'-=2turn'`
`'*='` | Multiply | `'*=10'`

### Colors

anime.js accepts and converts Hexadecimal, RGB, RGBA, HSL, and HSLA color values.

CSS color codes ( e.g. : `'red', 'yellow', 'aqua'` ) are not supported.

Accepts | Example
Hexadecimal | `'#FFF'` or `'#FFFFFF'`
RGB | `'rgb(255, 255, 255)'`
RGBA | `'rgba(255, 255, 255, .2)'`
HSL | `'hsl(0, 100%, 100%)'`
HSLA | `'hsla(0, 100%, 100%, .2)'`

HEX
RGB
HSL
RGBA
HSLA

### From To

Forces the animation to start at a specified value.

Type | Example
`Array` | `['50%', '100%']`

### Function based values

Get different values for every target and property of the animation.

The function accepts 3 arguments:

Arguments | Infos
`target` | The curently animated targeted element
`index` | The index of the animated targeted element
`targetsLength` | The total number of animated targets

## Keyframes

### Animation keyframes

Animation keyframes are defined using an Array, within the `keyframes` property.

If there is no duration specified inside the keyframes, each keyframe duration will be equal to the animation's total duration divided by the number of keyframes.

Type | Example
`Array` | `[ {value: 100, easing: 'easeOutExpo'}, {value: 200, delay: 500}, {value: 300, duration: 1000} ]`

### Property keyframes

Similar to animation keyframes, property keyframes are defined using an Array of property Object. Property keyframes allow overlapping animations since each property have its own keyframes array.

If there is no duration specified inside the keyframes, each keyframe duration will be equal to the animation's total duration divided by the number of keyframes.

Type | Example
`Array` | `[ {value: 100, easing: 'easeOutExpo'}, {value: 200, delay: 500}, {value: 300, duration: 1000} ]`

## Staggering

### Staggering basics

Staggering allows you to animate multiple elements with follow through and overlapping action.

    anime.stagger(value, options)

Arguments | Type | Info | Required
Value | `Number`, `String`, `Array` | The manipulated value(s) | Yes
Options | `Object` | Stagger parameters | No

delay = (100 * 0) ms
delay = (100 * 1) ms
delay = (100 * 2) ms
delay = (100 * 3) ms
delay = (100 * 4) ms
delay = (100 * 5) ms

### Start value

Starts the staggering effect from a specific value.

    anime.stagger(value, {start: startValue})

Types | Info
`Number`, `String` | Same as propety values, see values section

delay = 500 + (100 * 0) ms
delay = 500 + (100 * 1) ms
delay = 500 + (100 * 2) ms
delay = 500 + (100 * 3) ms
delay = 500 + (100 * 4) ms
delay = 500 + (100 * 5) ms

### Range value

Distributes evenly values between two numbers.

    anime.stagger([startValue, endValue])

Type | Info
`'easingName'` | All valid easing names are accepted, see easings section
`function(i)` | Custom easing function, see custom easings section

rotate = -360 + ((360 - (-360)) / 5) * 0
rotate = -360 + ((360 - (-360)) / 5) * 1
rotate = -360 + ((360 - (-360)) / 5) * 2
rotate = -360 + ((360 - (-360)) / 5) * 3
rotate = -360 + ((360 - (-360)) / 5) * 4
rotate = -360 + ((360 - (-360)) / 5) * 5

### From value

Starts the stagger effect from a specific position.

    anime.stagger(value, {from: startingPosition})

Options | Type | Info
`'first'` (default) | `'string'` | Start the effect from the first element
`'last'` | `'string'` | Start the effect from the last element
`'center'` | `'string'` | Start the effect from the center
`index` | `number` | Start the effect from the specified index

### Direction

Changes the order in which the stagger operates.

    anime.stagger(value, {direction: 'reverse'})

Options | Info
`'normal'` (default) | Normal staggering, from the first element to the last
`'reverse'` | Reversed staggering, from the last element to the first

### Easing

Stagger values using an easing function.

    anime.stagger(value, {easing: 'easingName'})

Type | Info
`'string'` | All valid easing names are accepted
`function(i)` | Use your own custom easings function

### Grid

Staggering values based a 2D array that allow "ripple" effects.

    anime.stagger(value, {grid: [rows, columns]})

Type | Info
`array` | A 2 items array, the first value is the number of rows, the second the number of columns

### Axis

Forces the direction of a grid starrering effect.

    anime.stagger(value, {grid: [rows, columns], axis: 'x'})

Parameters | Info
`'x'` | Follows the x axis
`'y'` | Follows the y axis

## Timeline

### Timeline basics

Timelines let you synchronise multiple animations together.
By default each animation added to the timeline starts after the previous animation ends.

Creating a timeline:

    var myTimeline = anime.timeline(parameters);

Argument | Type | Info | Required
`parameters` | `Object` | The default parameters of the timeline inherited by children | No

Adding animations to a timeline:

    myTimeline.add(parameters, offset);

Argument | Types | Info | Required
`parameters` | `Object` | The child animation parameters, override the timeline default parameters | Yes
`time offset` | `String` or `Number` | Check out the Timeline offsets section | No

### Time Offsets

Time offsets can be specified with a second optional parameter using the timeline `.add()` function. It defines when a animation starts in the timeline, if no offset is specifed, the animation will starts after the previous animation ends.
An offset can be relative to the last animation or absolute to the whole timeline.

Type | Offset | Example | Infos
String | `'+='` | `'+=200'` | Starts 200ms after the previous animation ends
String | `'-='` | `'-=200'` | Starts 200ms before the previous animation ends
Number | `Number` | `100` | Starts at 100ms, reagardless of the animtion position in the timeline

no offset
relative offset ('-=600')
absolute offset (400)

### Parameters inheritance

Parameters set in the parent timeline instance will be inherited by all the children.

Parameters that can be inherited
`targets`
`duration`
`delay`
`endDelay`
`round`

## Controls

### Play / Pause

Plays a paused animation, or starts the animation if the `autoplay` parameters is set to `false`.

    animation.play();

Pauses a running animation.

    animation.pause();

### Restart

Restarts an animation from its initial values.

    animation.restart();

### Reverse

Reverses the direction of an animation.

    animation.reverse();

### Seek

Jump to a specific time (in milliseconds).

    animation.seek(timeStamp);

Can also be used to control an animation while scrolling.

    animation.seek((scrollPercent / 100) * animation.duration);

### Timeline controls

Timelines can be controled like any other anime.js instance.

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

## Callbacks & Promises

### Update

Callback triggered on every frame as soon as the animation starts playing.

Type | Parameters | Info
Function | animation | Return the current animation Object

### Begin & Complete

`begin()` callback is triggered once, when the animation starts playing.

`complete()` callback is triggered once, when the animation is completed.

Both `begin()` and `complete()` callbacks are called if the animation's `duration` is `0`.

Type | Parameters | Info
Function | animation | Return the current animation Object

### loopBegin & loopComplete

`loopBegin()` callback is triggered once everytime a loop begin.

`loopComplete()` callback is triggered once everytime a loop is completed.

Type | Parameters | Info
Function | animation | Return the current animation Object

### Change

Callback triggered on every frames in between the animation's delay and endDelay.

Type | Parameters | Info
Function | animation | Return the current animation Object

### changeBegin & changeComplete

`changeBegin()` callback is triggered everytime the animation starts changing.

`changeComplete()` callback is triggered everytime the animation stops changing.

Animation direction will affect the order in which `changeBegin()` and `changeComplete()` are triggerd.

Type | Parameters | Info
Function | animation | Return the current animation Object

### Finished promise

Every animation instances return a `finished` promise when the animation finised.

    animation.finished.then(function() {
      // Do things...
    });

Promises are not suported in IE < 11.

## SVG

### Motion path

Animates an element relative to the `x`, `y` and `angle` values of an SVG path element.

    var myPath = anime.path('svg path');

The path function returns a new Function that returns the specified property.

Motion path animations are responsive since v3

Parameters | Example | Info
`'x'` | `myPath('x')` | Return the current x value in `'px'` of the SVG path
`'y'` | `myPath('y')` | Return the current y value in `'px'` of the SVG path
`'angle'` | `myPath('angle')` | Return the current angle value in `'degrees'` of the SVG path

### Morphing

Creates transition between two svg shapes.

Shapes must have the same number of points!

More info on SVG shape morphing here.

### Line drawing

Creates path drawing animation using the `'stroke-dashoffset'` property.
Set the path `'dash-offset'` value with `anime.setDashoffset()` in a from to formated value.

    strokeDashoffset: [anime.setDashoffset, 0]

More info on line drawing animation here.

## Easings

### Linear

Does not apply any easing timing to your animation.
Usefull for opacity and colors transitions.

    easing: 'linear'

### Penner's functions

Built-in Robert Penner's easing functions.

See easings in action on easings.net.

    easing: 'easeInOutSine'

Availabe easings :

in | out | in-out | out-in
`'easeInQuad'` | `'easeOutQuad'` | `'easeInOutQuad'` | `'easeOutInQuad'`
`'easeInCubic'` | `'easeOutCubic'` | `'easeInOutCubic'` | `'easeOutInCubic'`
`'easeInQuart'` | `'easeOutQuart'` | `'easeInOutQuart'` | `'easeOutInQuart'`
`'easeInQuint'` | `'easeOutQuint'` | `'easeInOutQuint'` | `'easeOutInQuint'`
`'easeInSine'` | `'easeOutSine'` | `'easeInOutSine'` | `'easeOutInSine'`
`'easeInExpo'` | `'easeOutExpo'` | `'easeInOutExpo'` | `'easeOutInExpo'`
`'easeInCirc'` | `'easeOutCirc'` | `'easeInOutCirc'` | `'easeOutInCirc'`
`'easeInBack'` | `'easeOutBack'` | `'easeInOutBack'` | `'easeOutInBack'`
`'easeInBounce'` | `'easeOutBounce'` | `'easeInOutBounce'` | `'easeOutInBounce'`

### Cubic Bézier Curve

Use your own custom cubic Bézier curves `cubicBezier(x1, y1, x2, y2)`.

    easing: 'cubicBezier(.5, .05, .1, .3)'

You can use Bézier curves generator like Ceaser to generate your curves coordinates.

### Spring

Spring physics based easing.

    easing: 'spring(mass, stiffness, damping, velocity)'

The duration of a spring animation is defined by the spring parameters.
The animation `duration` parameter will not be taken into account.

Parameter | Default | Min | Max
Mass | `1` | `0` | `100`
Stiffness | `100` | `0` | `100`
Damping | `10` | `0` | `100`
Velocity | `0` | `0` | `100`

### Elastic

Elastic easing.

    easing: 'easeOutElastic(amplitude, period)'

in | out | in-out | out-in
`'easeInElastic'` | `'easeOutElastic'` | `'easeInOutElastic'` | `'easeOutInElastic'`

Parameter | Default | Min | Max | Info
Amplitude | `1` | `1` | `10` | Controls the overshoot of the curve. The larger this number, the more overshoot there is.
Period | `.5` | `0.1` | `2` | Controls how many times the curve goes back and forth. The smaller this number, the more times the curtain goes back and forth.

### Steps

Defines the number of jumps an animation takes to arrive at its end value.

    easing: 'steps(numberOfSteps)'

Parameter | Default | Min | Max
Number of steps | `10` | `1` | `∞`

### Custom easing function

A custom easing function must be returned by function based value.

    easing: function() { return function(time) { return time * i} }

Parameter | Info
Time | Return the current time of the animation

## Helpers

### remove

Removes targets from a running animation or timeline.
The `targets` parameters accepts the same values as the targets property.

Removes targets from all active animations.

    anime.remove(targets);

Removes targets from a single animation or timeline.

    animation.remove(targets);

### get

Returns the original value of an element.

    anime.get(target, propertyName, unit);

Since anime.js uses getComputedStyle to access original CSS, the values are almost always returned in `'px'`, the third (optional) argument converts the value in the desired unit.

    anime.get(domNode, 'width', 'rem');

Parameter | Type | Info
target | `'string'`, `var` | Any valid targets can be used

CSS transforms : Only inlined values can be accessed.

### set

Immediately sets values to the specified targets.

    anime.set(targets, {property: value});

Parameters | Types | Info
target(s) | `'string'`, `var` | Any valid targets can be used
values | `object` | Any valid properties can be used

### random

Returns a random integer within a specific range.

    anime.random(minValue, maxValue);

### tick

Plays an animation using an external `requestAnimationFrame` loop.

    animation.tick(time)

Don't forget to set the `autoplay` parameter to `false` to prevent the anime.js built-in RAF loop to start.

### running

Returns an Array of all active anime.js instances currently running.

    anime.running

### Suspend on visibility change

    anime.suspendWhenDocumentHidden = false; // default true

By default all animations are paused when switching tabs, useful if you want to make sure the user sees everything and doesn't miss an important part of your animation.
But you can choose to let the animation runs normally without any pause, like a video or an audio track that can continuously plays in the background.

##