W3cubDocs

/Web APIs

SVGSVGElement: animationsPaused() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨January 2020⁩.

The animationsPaused() method of the SVGSVGElement interface checks whether the animations in the SVG document fragment are currently paused.

Syntax

animationsPaused()

Parameters

None.

Return value

A boolean. true if this SVG document fragment is in a paused state.

Examples

>

Checking if Animations are Paused

<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/Resume Animations</button>
<pre id="status"></pre>
const svgElement = document.getElementById("exampleSVG");
const pauseButton = document.getElementById("pauseBtn");
const statusDisplay = document.getElementById("status");

function updateStatus() {
  const isPaused = svgElement.animationsPaused();
  statusDisplay.textContent = `Animations paused: ${isPaused}`;
}

pauseButton.addEventListener("click", () => {
  if (svgElement.animationsPaused()) {
    svgElement.unpauseAnimations();
  } else {
    svgElement.pauseAnimations();
  }
  updateStatus();
});

// Initialize the status display
updateStatus();

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS
animationsPaused 1 79 1.5 ≤12.1 3 18 4 ≤12.1 1 1.0 3 1

See also

© 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/animationsPaused