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

Stagger

Since 2.0.0

Stagger value types

stagger(
  ┌───────────────────┐
  │ '1rem',           ├─ Stagger Value
  └───────────────────┘
  {
    start: 100,
    from: 2,
    reversed: false,
    ease: 'outQuad',
    grid: [8, 8],
  }
);
In this section
  • Numerical
  • Range
Previous Next
  • Timeline positions staggering
  • Numerical value