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

  • Documentation
  • Easings
  • 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