Controls

AnimationControls are returned from both the animate and timeline functions. They can be used to inspect change the playback of the animation.

const animation = animate(element, { opacity: 1 })

const { currentTime } = animation
animation.stop()

Props

finished

A Promise that resolves when the animation finishes:

// Async/await
await animate(element, { opacity: 0 }).finished

// Promise
animate(element, { opacity: 0 })
  .finished
  .then(() => {})

currentTime

Get/set the current play time of the animation in seconds. This can be used to scrub through the animation.

const animation = animate(element, { opacity: 0 }, { duration: 2 })
  
const currentTime = animation.currentTimeanimation.currentTime = 1

duration

Get the current play time of the animation in seconds. This can be especially useful when an animation has used the default duration, or when a timeline has dynamically generated a duration from the provided sequence.

This prop is currently read-only.

const animation = animate(element, { opacity: 0 })

const duration = animation.duration

playbackRate

Default: 1

Get/set the current playback rate of the animation.

• 1 is normal rate.

• 0.5 is half rate.

• 2 doubles the playback rate.

• -1 reverses playback.

const animation = animate(element, { opacity: 0 })

const currentPlaybackRate = animation.playbackRate
animation.playbackRate = currentPlaybackRate * 2

playState

Returns the current state of the animation. Can be idle, running, paused or finished.

Methods

pause()

Pauses the animation until resumed with play().

const animation = animate(element, { opacity: 0 })
animation.pause()

play()

Plays a paused animation, or an animation where autoplay was set to false.

const animation = animate(element, { opacity: 0 })
animation.pause()
animation.play()

finish()

Immediately completes the animation and commits the final keyframe to the element's styles.

const animation = animate(element, { opacity: 0 })
animation.finish()

cancel()

Cancels the animation and reverts the element to its underlying styles.

const animation = animate(element, { opacity: 0 })
animation.cancel()

stop()

Cancels the animation and commits the current animation state to the element's styles.

const animation = animate(element, { opacity: 0 })
animation.stop()