SVG Animation Using Custom Code JS

Design help Custom code
1

I’m trying to animate an SVG file using a custom script, but looking at the DOM the SVG is referenced with an < img > tag with a .svg extension, rather than an < svg > tag.

Does this impact the scripts I have running as the scripts are referencing classes/ids that aren’t visible in the DOM? As of now it’s not animating and I’m wondering if there’s a workaround for that.

2

Just insert your svgs in the embed element.

3

Unfortunately the svg is more than 10,000 characters so I’m getting an error. Not sure what to do about that.

That’s definitely a workaround though!

4

Hm, I wonder if such huge svgs being placed inline won’t cause other issues with site performance?

5

If anyone was wondering, I wrote a script as a workaround to view the animations in webflow whilst working on it. Once the site is published, the animations take place, but are static during the designer phase: All I did was embed a div with the class of “img” as a placeholder that would later be populated by the svg code.

<script>
document.addEventListener("DOMContentLoaded", function(){
  var bannerImage = document.querySelector('.img');
  fetch(img.src)
    .then(function(response) {
      return response.text();
    }).then(function(svgStr) {
      img.parentNode.innerHTML = svgStr;
      var script = yourAnimation();
      });
    });
})
</script>
6

Hi @DavidKnight - would you mind explaining your work-around a bit please? I have exactly the same issue (but for an SVG of a map with a bit of custom JS embedded to add interactivity on hover over certain regions).

Where did you put your custom code? And what is the fetch(img.src) referencing?
Thanks :slight_smile: