svg trigger animation issue (svgator)

user_10782385 0
Viewed 210

Can you tell me why this example http://www.silkcutz.co.uk/test/ taken from here https://github.com/SVGator/trigger-animation which uses (logo.svg with ID "e6flsqoxhzzs1") works absolutely fine....

BUT http://www.silkcutz.co.uk/test/2.html (using Untitled.svg with ID "eOKHP9YQpje1") doesnt, this is a very simple animation of a box moving position (just for test purposes).

Both html files are very simple and should require only the filename and ID changing but the examples 2.html... you would think the svg has issues but when testing the SVG file (Untitled.svg) using the upload svg facility on the live demo here https://www.svgator.com/help/getting-started/svgator-player-js-api it work fine and is triggered as expected!

Any help would be very much appreciated!

svg-animate svg css html javascript
1 Answers

To use the technique described there, you need to export the SVGator project using "Animation start: On click".

But programmatic animation has been recently implemented. Check these resources: https://www.svgator.com/help/getting-started/animate-programmatically https://www.svgator.com/help/getting-started/svgator-player-js-api

Here's a complete example on how to use Player API with a SVG embedded in an tag:

<!DOCTYPE html>
<html>
   <head>
      <title>Testing SVG</title>
      <script>
         //Wait for the document to load
            document.addEventListener("DOMContentLoaded", function() {
                //grab the <object> element
                let object1 = document.getElementById('animated-svg');

                //Wait for the content of the <object> to load
                object1.addEventListener("load", function() {
                    //grab the <svg> element
                    let svg = object1.contentDocument.getElementById('e5478wvxh25l1');

                    //Wait for the SVGtor player to be ready for use
                    svg.svgatorPlayer.ready(function(player) {
                        //inset your code here; i.e.
                        player.play();
                    });
                });
            });
      </script>
   </head>
   <body>
      <object id="animated-svg" type="image/svg+xml" data="animated.svg" style="height: 857px;"></object>
   </body>
</html>

It's also worth knowing that no matter how you set the "Animation start", you always have access to the Player API and can control the animations as a PRO user.

user_184632760
Related