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 })
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 })
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
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
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()
Did you know?
There's an incredible new set of developer tools for Chrome that let you inspect, edit and export Motion One and CSS animations.