Controls

Contents

  1. Props
  2. Methods

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

Props

finished

A Promise that resolves when the animation finishes:

Or throws when the animation is cancelled:

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.

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.

playbackRate

Default: 1

Get/set the current playback rate of the animation.

  • 1 is normal time.
  • 2 doubles the playback rate.
  • -1 reverses playback.

Methods

pause()

Pauses the animation until resumed with play.

play()

Plays a paused animation.

finish()

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

cancel()

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

stop()

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

Stay updated with the Motion One newsletter. We don't spam, and unsubscription is instant.