This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The unpauseAnimations() method of the SVGSVGElement interface resumes (i.e., unpauses) currently running animations that are defined within the SVG document fragment, causing the animation clock to continue from the time at which it was suspended.
unpauseAnimations()
None.
None (undefined).
<svg id="exampleSVG" width="200" height="100">
<circle cx="50" cy="50" r="30" fill="blue">
<animate
attributeName="cx"
from="50"
to="150"
dur="2s"
repeatCount="indefinite" />
</circle>
</svg>
<button id="pauseBtn">Pause Animations</button>
<button id="resumeBtn">Resume Animations</button>
<pre id="status"></pre>
const svgElement = document.getElementById("exampleSVG");
const pauseButton = document.getElementById("pauseBtn");
const resumeButton = document.getElementById("resumeBtn");
const statusDisplay = document.getElementById("status");
pauseButton.addEventListener("click", () => {
svgElement.pauseAnimations();
statusDisplay.textContent = "Animations paused.";
});
resumeButton.addEventListener("click", () => {
svgElement.unpauseAnimations();
statusDisplay.textContent = "Animations resumed.";
});
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | WebView on iOS | |
unpauseAnimations |
1 | 12 | 1.5 | ≤12.1 | 3 | 18 | 4 | ≤12.1 | 1 | 1.0 | 3 | 1 |
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SVGSVGElement/unpauseAnimations