Controls

Animation controls are returned from both the animate and timeline functions and can be used to change the playback of the animation.

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

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(() => {
  // Do stuff
})

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.currentTime
animation.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 time.
• 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.

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()