| property | type | description |
|---|---|---|
| delay | number or function | Delay in milliseconds. See Delay and Stagger |
| easing | string | Rate at which to progress the animation. See Easings/Timing Functions |
| endDelay | number or function | End delay in milliseconds. See Delay and Stagger |
| stagger | number | Delay between each target in the targets list. See Delay and Stagger |
| targets | AnimationTarget | An html selector, an Element, a NodeList, or a jQuery object. This can also be an array of any of those or a function that returns any of those. |
| props | PropertyOptions | A dictionary of properties to interpolate. Can be a normal object property, element attribute, or a CSS Variable. See Property Options |
| web | WebPropertyOptions | A dictionary of properties to animate using the Web Animations API. There are some restrictions on usage based on the capabilities of the Web Animations API. See Property Options |
See Getting Started for basic usage.
The animate() function can accept Animation Options or an array of Animation Options. Each Animation Options object starts from 0ms to its duration unless from or to are specified. A timeline is returned.
In addition to the Animation Options above, animate() has these additional properties:
| property | type | description |
|---|---|---|
| duration | number | Total time of the animation in milliseconds |
| from | number | When to start the animation in milliseconds |
| to | number | When to stop the animation in milliseconds |
The recommended property to use is duration. However,
The interpolate function is a helper that interpolates between two numbers at a midpoint (offset). left and right are the numbers corresponding to the last value and the next value. offset is a number between 0 and 1 that represents the progression between those two values (.5 = 50%). This function can be used in conjunction with Property Interpolation to create custom behaviors per property. This function uses the formula: left + (right - left) * offset to find the value.
See Sequences for usage.
The sequence() function accepts an array of Animation Options. A timeline is returned. In addition to the Animation Options above, sequence() has these additional properties:
In addition to the animation options above, sequence () has these additional properties:
| property | type | description |
|---|---|---|
| duration | number | Total time of the animation in milliseconds |
The timeline() function creates an empty timeline.
It is used internally by animate() and sequence().
| property | type | description |
|---|---|---|
| references | object | Dictionary containing all the references in the timeline |
| property | type | description |
|---|---|---|
| currentTime | number | Current time of the timeline. The animation must be active (paused, finished, or running). When set, it internally calls seek() and updates the targets on the timeline |
| playbackRate | number | The current rate of time. -1 is backwards, and 1 is forwards |
interchangeable with animate()
Adds animation(s) at the end of the timeline. Options can either be a single options object or an array of options
. Add accepts Animation Options in addition to the following properties:
| property | type | description |
|---|---|---|
| duration | number | Total time of the animation in milliseconds |
| from | number | When to start the animation in milliseconds |
| to | number | When to stop the animation in milliseconds |
Adds animation(s) at a specific part of the duration. Accepts Animation Options. The properties '''duration''', '''from''', and '''to''' are ignored. Options can either be a single options object or an array of options
Cancels an animation, removes all effects on targets, and resets internal state
This cancels the effects of the timeline, unregisters all listeners, and destroys the internal model of the timeline. This is especially important if creating and discarding timelines frequently. (for example, creating a warp field effect)
Finishes an animation. If the animation has never been active, this will activate effects * - If playbackRate == 0 or more, the animation will seek to duration. * - If playbackRate < 0, the animation will seek to 0
Register/unregister for timeline events. The follow events exist:
| Event | Occurs when |
|---|---|
| cancel | The cancel() function has been called |
| finish | The finish() function has been called or the animation naturally finished |
| pause | The pause() function has been called |
| reverse | The reverse() function has been called, playbackRate has been modified, or if alternate is true, each time the timeline switches direction. |
| update | The timeline is updating its animation controllers. This is called every frame, every time seek() is called, and every time currentTime is set. |
| play | The play() function has been called |
Registers for an event only one time. The listener is unregistered immeditately before the listener is invoked.
Pauses execution of the animation. If the animation is not active, this will activate effects
Plays the animation until finished. If the animation is not active, this will activate the effects. The play function has the following optional properties
| property | type | description |
|---|---|---|
| alternate | boolean | True if the animation should reverse direction each time it finishes. This can be used to create a "yo-yo" effect. The default value is false. |
| destroy | boolean | True if the timeline should self-destruct after finishing. This cancels the effects of the timeline, deregisters all listeners, and destroys the internal model of the timeline. The default is false, but the recommended value is true. |
| repeat | number | Number of times to play the animation. Use Infinity to play the timeline forever. The default value is 1. |
Inverts the animation playbackRate. If the animation is currently playing, it will reverse the animation
Seeks to a specific time. If the animation is not active, this will activate effects
See Sequences for usage.
The sequence() function accepts an array of Animation Options. In addition to the Animation Options above, sequence() has these additional properties:
In addition to the animation options above, sequence () has these additional properties:
| property | type | description |
|---|---|---|
| duration | number | Total time of the animation in milliseconds |
Sets properties at the end of timeline. This is primarily useful for setting initial values at the beginning of the timeline or creating a hard switch between two values. One common example of this is setting transformOrigin in the Web Animations API.
Set uses Property Options but cannot accept more than one value per property. (i.e. Property Value as Array and Property Value as a set of Keyframes syntax are not supported)
. Add accepts Animation Options in addition to the following properties:
| property | type | description |
|---|---|---|
| at | number | Time at which to set the properties. Default value is the total duration of the timeline. |