This content originally appeared on Bram.us and was authored by Bramus!
Recently built a demo that demonstrated a specific animation. Only problem: if you missed it, you had no way of restarting it. Instead of forcing the visitor to reload the page, this little JavaScript-snippet – attached to a button click – did the trick:
const restartAnimations = ($el) => {
$el.getAnimations().forEach((anim) => {
anim.cancel();
anim.play();
});
};Pass in an Element, and it will will loops all attached animations bound to it. For each animation it restarts them by triggering a cancel + play.
~
Demo
See the Pen
JavaScript Restart Animations by Bramus (@bramus)
on CodePen.
~
🔥 Like what you see? Want to stay in the loop? Here's how:
This content originally appeared on Bram.us and was authored by Bramus!
Bramus! | Sciencx (2022-07-20T20:16:58+00:00) JavaScript: Restart all Animations of an Element. Retrieved from https://www.scien.cx/2022/07/20/javascript-restart-all-animations-of-an-element/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.