Anime.js | JavaScript Animation Engine

Documentation
Examples
GitHub
Sponsor

Getting started
Timer
- Playback settings
  - delay
  - duration
  - loop
  - loopDelay
  - alternate
  - reversed
  - autoplay
  - frameRate
  - playbackRate
- Callbacks
  - onBegin
  - onComplete
  - onUpdate
  - onLoop
  - onPause
  - then()
- Methods
  - play()
  - reverse()
  - pause()
  - restart()
  - alternate()
  - resume()
  - complete()
  - cancel()
  - revert()
  - seek()
  - stretch()
- Properties
Animation
Timeline
- Add timers
- Add animations
- Sync WAAPI animations
- Sync timelines
- Call functions
- Time position
- Playback settings
  - defaults
  - delay
  - loop
  - loopDelay
  - alternate
  - reversed
  - autoplay
  - frameRate
  - playbackRate
  - playbackEase
- Callbacks
  - onBegin
  - onComplete
  - onBeforeUpdate
  - onUpdate
  - onRender
  - onLoop
  - onPause
  - then()
- Methods
  - add()
  - set()
  - sync()
  - label()
  - remove()
  - call()
  - init()
  - play()
  - reverse()
  - pause()
  - restart()
  - alternate()
  - resume()
  - complete()
  - cancel()
  - revert()
  - seek()
  - stretch()
  - refresh()
- Properties
Animatable
- Settings
  - unit
  - duration
  - ease
  - modifier
- Methods
  - Getters
  - Setters
  - revert()
- Properties
Draggable
- Axes parameters
  - x
  - y
  - snap
  - modifier
  - mapTo
- Settings
- Callbacks
  - onGrab
  - onDrag
  - onUpdate
  - onRelease
  - onSnap
  - onSettle
  - onResize
  - onAfterResize
- Methods
  - disable()
  - enable()
  - setX()
  - setY()
  - animateInView()
  - scrollInView()
  - stop()
  - reset()
  - revert()
  - refresh()
- Properties
ScrollObserver
Scope
Stagger
- Time staggering
- Values staggering
- Timeline staggering
- Value types
  - Numerical
  - Range
- Parameters
  - start value
  - from
  - reversed
  - ease
  - grid
  - axis
  - modifier
SVG
Utilities
- $()
- get()
- set()
- remove()
- cleanInlineStyles()
- random()
- randomPick()
- shuffle()
- sync()
- lerp()
- round()
- clamp()
- snap()
- wrap()
- mapRange()
- interpolate()
- roundPad()
- padStart()
- padEnd()
- degToRad()
- radToDeg()
- Chain-able utilities
WAAPI
Engine
- Parameters
- Methods
- Properties
- Engine defaults

Getting started

This section covers how to download, install and import Anime.js in your project.

In this section

Installation
Imports
Using with vanilla JS
Using with React

Previous Next

Documentation
Installation