anime.js logo v4 Anime.js | JavaScript Animation Engine

  • Docs
  • Easing editor
  • Learn
  • Examples
  • GitHub
  • Sponsor
  • Getting started
    • Installation
    • Module imports
    • Using with vanilla JS
    • Using with React
  • 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()
      • reset()
      • cancel()
      • revert()
      • seek()
      • stretch()
    • Properties
  • Animation
    • Targets
      • CSS Selector
      • DOM Elements
      • JavaScript Objects JS
      • Array of targets
    • Animatable properties
      • CSS Properties
      • CSS transforms
      • CSS Variables JS
      • JS Object properties JS
      • HTML Attributes JS
      • SVG Attributes JS
    • Tween value types
      • Numerical
      • Unit conversion
      • Relative JS
      • Color
      • Color function WAAPI
      • CSS variable
      • Function based
    • Tween parameters
      • to
      • from
      • delay
      • duration
      • ease
      • composition JS
      • modifier JS
    • Keyframes
      • Tween values
      • Tween parameters JS
      • Duration based JS
      • Percentage based JS
    • Playback settings
      • delay
      • duration
      • loop
      • loopDelay JS
      • alternate
      • reversed
      • autoplay
      • frameRate JS
      • playbackRate
      • playbackEase JS
      • persist WAAPI
    • Callbacks
      • onBegin JS
      • onComplete
      • onBeforeUpdate JS
      • onUpdate JS
      • onRender JS
      • onLoop JS
      • onPause JS
      • then()
    • Methods
      • play()
      • reverse()
      • pause()
      • restart()
      • alternate()
      • resume()
      • complete()
      • cancel()
      • revert()
      • reset() JS
      • seek()
      • stretch() JS
      • refresh() JS
    • Properties
  • 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()
      • reset()
      • 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
      • trigger
      • container
      • containerPadding
      • containerFriction
      • releaseContainerFriction
      • releaseMass
      • releaseStiffness
      • releaseDamping
      • velocityMultiplier
      • minVelocity
      • maxVelocity
      • releaseEase
      • dragSpeed
      • dragThreshold
      • scrollThreshold
      • scrollSpeed
      • cursor
    • Callbacks
      • onGrab
      • onDrag
      • onUpdate
      • onRelease
      • onSnap
      • onSettle
      • onResize
      • onAfterResize
    • Methods
      • disable()
      • enable()
      • setX()
      • setY()
      • animateInView()
      • scrollInView()
      • stop()
      • reset()
      • revert()
      • refresh()
    • Properties
  • Scope
    • Add constructor function
    • Register method function
    • Parameters
      • root
      • defaults
      • mediaQueries
    • Methods
      • add()
      • addOnce()
      • keepTime()
      • revert()
      • refresh()
    • Properties
  • Events
    • onScroll
      • Settings
        • container
        • target
        • debug
        • axis
        • repeat
      • Thresholds
        • Numeric values
        • Positions shorthands
        • Relative position values
        • Min max
      • Synchronisation modes
        • Method names
        • Playback progress
        • Smooth scroll
        • Eased scroll
      • Callbacks
        • onEnter
        • onEnterForward
        • onEnterBackward
        • onLeave
        • onLeaveForward
        • onLeaveBackward
        • onUpdate
        • onSyncComplete
      • Methods
        • link()
        • refresh()
        • revert()
      • Properties
  • SVG
    • morphTo()
    • createDrawable()
    • createMotionPath()
  • Text
    • splitText()
      • Settings
        • lines
        • words
        • chars
        • debug
        • includeSpaces
        • accessible
      • Split parameters
        • class
        • wrap
        • clone
      • HTML template
      • Methods
        • addEffect()
        • revert()
        • refresh()
      • Properties
  • Utilities
    • stagger()
      • Time staggering
      • Values staggering
      • Timeline staggering
      • Value types
        • Numerical
        • Range
      • Parameters
        • start
        • from
        • reversed
        • ease
        • grid
        • axis
        • modifier
        • use
        • total
    • $()
    • get()
    • set()
    • cleanInlineStyles()
    • remove()
    • sync()
    • keepTime()
    • random()
    • createSeededRandom()
    • randomPick()
    • shuffle()
    • round()
    • clamp()
    • snap()
    • wrap()
    • mapRange()
    • lerp()
    • damp()
    • roundPad()
    • padStart()
    • padEnd()
    • degToRad()
    • radToDeg()
    • Chain-able utilities
  • Easings
    • Built-in eases
    • Cubic Bézier
    • Linear
    • Steps
    • Irregular
    • Spring
  • WAAPI
    • When to use
    • Hardware-acceleration
    • Improvements to WAAPI
      • Sensible defaults
      • Multi-targets animation
      • Default units
      • Function based values
      • Individual transforms
      • Individual property params
      • Spring and custom easings
    • API differences
      • iterations
      • direction
      • easing
      • finished
    • convertEase()
  • Engine
    • Parameters
      • timeUnit
      • speed
      • fps
      • precision
      • pauseOnDocumentHidden
    • Methods
      • update()
      • pause()
      • resume()
    • Properties
    • Engine defaults

Getting started

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

If you're migrating from v3, please check out the migration guide on GitHub.

In this section
  • Installation
  • Module imports
  • Using with vanilla JS
  • Using with React
Previous Next
  • Documentation
  • Installation

Anime.js is only possible thanks to our incredible sponsors: