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()
Have you seen Motion DevTools?
It's an incredible new developer tool for Chrome that let you inspect, edit and export Motion One and CSS animations. Animate like the good-ol' days of Flash!