Gracefully Pause or Resume SVG Animation using Rum or Reagent in ClojureScript

181 views Asked by At

How do you pause a running SVG animation using <animateTransform> element inside an SVG without losing the animation state?

Setting animation-play-state: paused; on either the animating element, or the parent element has no effect. Changing the repeatCount from indefinite to 0, loses the animation state.

1

There are 1 answers

0
Maximilian Berndt On

Kinda late, but here is how to do it in vanilla javascript: https://codepen.io/jjdewitt/pen/XJRqNK?editors=1010

You need to call yourSvgElement.pauseAnimations(); on the SVG Element