Trigger the SVG animation manually using JavaScript
Update from 2022 March:
For a complete control over your animation from JS code, see SVGator's Player API:We will show you how to start the animation with a custom event by simulating a click on the SVG element.
The following instructions will not work with a regular index.html file loaded into the browser. The file must be opened in the browser through a webserver. Just clone and start our functional example called trigger-animation from github. It has a http-server that loads index.html with an animated SVG and a button that triggers the animation.
First, add the SVG with an object tag, like this:
<object id ="animated-svg" type="image/svg+xml" data="animated.svg"></object>
You can get to the SVG element in a few steps:
Get the object element : a = document.getElementById("animated-svg")
Get the content document : b = a.contentDocument
Copy the ID from the beginning of the SVG that looks like this <svg id="e5478wvxh25l1">. Please note that it will be different in your case so change it accordingly.
Use the ID to get to the SVG element:
c = b.getElementById("e5478wvxh25l1")
Now you can trigger the click to start the animation
c.dispatchEvent(new Event('click'));
Now your SVG will animate everytime you dispatch a click event.
We hope it helps!
Still got questions? Send us an email to contact@svgator.com and we will get back to you as soon as we can.