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()
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
})
// Async/await
await animate(element, { opacity: 0 }).finished

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

Or throws when the animation is cancelled:

// Async/await
try {
  await animate(element, { opacity: 0 }).finished
} catch (e) {
  // Animation was cancelled
}

// Promise
animate(element, { opacity: 0 }).finished.catch((e) => {
  // Do stuff
})
// Async/await
try {
  await animate(element, { opacity: 0 }).finished
} catch (e) {
  // Animation was cancelled
}

// Promise
animate(element, { opacity: 0 }).finished.catch((e) => {
  // Do stuff
})

Note: If any one of the animating values is cancelled or interrupted by a new animation, finished will throw.

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
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
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
const animation = animate(element, { opacity: 0 })

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

Methods

pause()

Pauses the animation until resumed with play.

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

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

animation.pause()

play()

Plays a paused animation.

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

animation.pause()
animation.play()
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()
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()
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()
const animation = animate(element, { opacity: 0 })

animation.stop()