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

  • Docs
  • Learn
  • Examples
  • GitHub
  • Sponsor
  • Getting started
    • Installation
    • 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()
      • 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 WAAPI
      • 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
    • 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()
      • 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()
      • 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
      • scrollThreshold
      • scrollSpeed
      • cursor
    • Callbacks
      • onGrab
      • onDrag
      • onUpdate
      • onRelease
      • onSnap
      • onSettle
      • onResize
      • onAfterResize
    • Methods
      • disable()
      • enable()
      • setX()
      • setY()
      • animateInView()
      • scrollInView()
      • stop()
      • reset()
      • revert()
      • refresh()
    • Properties
  • ScrollObserver
    • 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
  • Scope
    • Add constructor function
    • Register method function
    • Parameters
      • root
      • defaults
      • mediaQueries
    • Methods
      • add()
      • revert()
      • refresh()
    • Properties
  • Stagger
    • Time staggering
    • Values staggering
    • Timeline staggering
    • Value types
      • Numerical
      • Range
    • Parameters
      • start value
      • from
      • reversed
      • ease
      • grid
      • axis
      • modifier
  • SVG
    • morphTo()
    • createDrawable()
    • createMotionPath()
  • 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
    • 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

Documentation

This documentation is only made possible with the help of my sponsors

Anime.js is developed and maintained with the generous support of my sponsors. If you're using Anime.js, a monthly contribution would be highly valuable.

Funding goal

0%
Loading sponsors...

Help the project via GitHub Sponsors.

Platinum sponsors

In this section
  • Getting started
  • Timer
  • Animation
  • Timeline
  • Animatable
  • Draggable
  • ScrollObserver
  • Scope
  • Stagger
  • SVG
  • Utilities
  • WAAPI
  • Engine
Next
  • Getting started