This is an experimental technologyCheck the Browser compatibility table carefully before using this in production.
The updatePlaybackRate()
method of the Web Animations API's Animation
Interface sets the speed of an animation after first synchronizing its playback position.
In some cases, an animation may run on a separate thread or process and will continue updating even while long-running JavaScript delays the main thread. In such a case, setting the playbackRate
on the animation directly may cause the animation's playback position to jump since its playback position on the main thread may have drifted from the playback position where it is currently running.
updatePlaybackRate()
is an asynchronous method that sets the speed of an animation after synchronizing with its current playback position, ensuring that the resulting change in speed does not produce a sharp jump. After calling updatePlaybackRate()
the animation's playbackRate
is not immediately updated. It will be updated once the animation's ready
promise is resolved.
Syntax
Animation.updatePlaybackRate(2);
Parameters
- playbackRate
- The new speed to set. This may be a positive number (to speed up or slow down the animation), a negative number (to make it play backwards), or zero (to effectively pause the animation).
Return value
None.
Examples
A speed selector component would benefit from smooth updating of updatePlaybackRate()
, as demonstrated below:
speedSelector.addEventListener('input', evt => {
cartoon.updatePlaybackRate(parseFloat(evt.target.value));
cartoon.ready.then(() => {
console.log(`Playback rate set to ${cartoon.playbackRate}`);
});
});
Specifications
Specification | Status | Comment |
Web AnimationsThe definition of 'updatePlaybackRate()' in that specification. | Working Draft |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Chrome
No support No |
Edge
No support No |
Firefox
Full support 60 |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
Full support 60 |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.'
- Experimental. Expect behavior to change in the future.
See also
- Web Animations API
Animation.playbackRate
— read back the current playback rate or set it in a synchronous manner.Animation.reverse()
— invert the playback rate and restart playback if necessary.Animation
— contains other methods and properties you can use to control web page animation.
Animation.updatePlaybackRate() by Mozilla Contributors is licensed under CC-BY-SA 2.5.