Javascript Not Working to Animate SVG

Solved
Highlighted
Explorer
83 11 22

I have an SVG I made in illustrator that works perfectly and animates perfectly, but when I put it in Shopify only the css works and none of the javascript, what's odd is when I first added it to the shopify page the javascript worked but then after a couple changes to the text content on the page it stopped.

 

I've added the HTML of the SVG inside the page content builder and put it inside the HTML area, there's nothing wrong with the HTML code here, I've checked it on JSfiddle and it works perfectly, also it displays perfectly just the JS animation isn't working.

 

Then I created a new asset called svg-animate.js and added it to theme.liquid with the other script inserts, here is the code:  

  <script src="{{ 'svg-animate.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'lazysizes.js' | asset_url }}" async="async"></script>
  <script src="{{ 'vendor.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>

I checked on chrome and my page is loading svg-animate.js so it should be working??? if someone could help out would really appreciate.

 

The javascript i'm trying to use: 

let drawSVG = function() {
  let paths = document.querySelectorAll('path');
  for (let i = 0; i < paths.length; i++) {
    let path = paths[i];
    let length = path.getTotalLength();
    // Clear any previous transition
    path.style.transition = path.style.WebkitTransition =
      'none';
    // Set up the starting positions
    path.style.strokeDasharray = length + ' ' + length;
    path.style.strokeDashoffset = length;
    // Trigger a layout so styles are calculated & the browser
    // picks up the starting position before animating
    path.getBoundingClientRect();
    // Define our transition
    path.style.transition = path.style.WebkitTransition =
      'stroke-dashoffset 10s ease-in-out';
    // Go!
    path.style.strokeDashoffset = '0';
  }
}

drawSVG();
/* From Modernizr */
function whichTransitionEvent() {
  var t;
  var el = document.createElement('fakeelement');
  var transitions = {
    'transition': 'transitionend',
    'OTransition': 'oTransitionEnd',
    'MozTransition': 'transitionend',
    'WebkitTransition': 'webkitTransitionEnd'
  }

  for (t in transitions) {
    if (el.style[t] !== undefined) {
      return transitions[t];
    }
  }
}
/* Listen for a transition! */
var transitionEvent = whichTransitionEvent();
var transitionDone = false;
transitionEvent && document.body.addEventListener(transitionEvent, function() {
    transitionDone = true;
    document.body.className = "pointer";
});

document.body.onclick = function() {
  if (transitionDone) {
    transitionDone = false;
    document.body.className = "";
  }
};

 

Thanks!

 

 

 

0 Likes
Shopify Expert
133 6 20

Can you try to change the order of js files

 <script src="{{ 'vendor.js' | asset_url }}" defer="defer"></script> 
<script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>
<script
src="{{ 'svg-animate.js' | asset_url }}" defer="defer"></script> <script src="{{ 'lazysizes.js' | asset_url }}" async="async"></script>
Problem Solved? ✔️Accept the solution so you can help others.
* Email: fayyazraza@gmail.com * Skype: fayyaz_raza
0 Likes
Explorer
83 11 22

Thanks but didn't fix it, shopify is still ignoring the svg-animate.js, tried including it in theme.js and same issue, again works perfectly in JS fiddle without any external js or css, is there something I need to wrap my javascript with in the svg-animate.js? what you see in the first post is exactly what is inside svg-animate.js

0 Likes
Shopify Expert
133 6 20

If you could give me access of your store. I can look into details 

Problem Solved? ✔️Accept the solution so you can help others.
* Email: fayyazraza@gmail.com * Skype: fayyaz_raza
0 Likes
Shopify Expert
9779 52 1394

Rather than randomly trying to adjust the order of scripts or add forum members as staff (not generally recommended in any case), lets see a link to the shop so we can see what's happening in the live shop. Perhaps it's a simple JavaScript bug - or related issue.

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
1 Like
Explorer
83 11 22

Removed all the other html content and the SVG works outside the div, any reasons why the SVG javascript wouldn't work when the SVG html is inside a div container? was layered like: 

<div class="grid-custom-content">
 <div>
  <div class="custom-content-fill">
  <svg width="50%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 361 286"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs><title>paris</title><g id="Layer_2" data-name="Layer 2"><path class="cls-1 fill-svg-black" d="M13,301V247h1v-5s3,1,3,3a2,2,0,0,0,2,2s1,0,1,2v16h5V243a3.62,3.62,0,0,1-2-1,3.77,3.77,0,0,1-1-3h3V226l-2-3h2v-2l-3-3h3v-6H22l3-2v-2h2v2h5v-2h3v2h4v-2h3v2h4v-2h3v2h5v-2h3v2h4v-2h3v2h4v-2h3v2l3,2H71v6h3l-3,3v2h2l-2,3v13h3c0,.14.07,2.56-1.64,3.59A3.13,3.13,0,0,1,71,243v11l2-2h1v-6l5-4s3,2,5,0v-3h2v-1H85v-4h1a10.5,10.5,0,0,1,8-11v-8h0c-.23-1.07,1-2,1-2l0,0,0,0v0a2.89,2.89,0,0,1,.63.76A3,3,0,0,1,96,215v8a7.74,7.74,0,0,1,2,1,8.35,8.35,0,0,1,3,4s0-5,3-5v-4h-1v-4h1a22.06,22.06,0,0,1,2-9,20.1,20.1,0,0,1,2-3,7.82,7.82,0,0,1,2-2,18.59,18.59,0,0,1,2-1v-9s0-3,2-3v-5h1v5s2,0,2,3v9s7,2,8,14v1h1v4h-1v4a4.33,4.33,0,0,1,2,4c1-2.48,2.1-3.52,3-4l2-1v-8l1-1v0a1.87,1.87,0,0,1,1,2c-.11.92-.1,3.37,0,7a10,10,0,0,1,2,1,12,12,0,0,1,3,3,13.53,13.53,0,0,1,2,8h1v4h-1v3h1v-2h1v3h2v23h2V214l6-4,1-1v-6l4-4,4,1v11l14,3v2h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v3h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h7v-4h2l20-36V210h7s9-20,9-42l-1-1v-8l3.5-.5c2.77-29.09,4.56-58.8,5-91q.21-15.75,0-31c-.17-.15-1.79-.64-2-1A3.45,3.45,0,0,1,226,34a2,2,0,0,1,2-2c.23,0,.58,0,1,0,.73,0,.86.07,1,0,.3-.15.48-.81,0-3a16.22,16.22,0,0,1-1-3,12.13,12.13,0,0,1,0-6,5.7,5.7,0,0,1,4-4h2a5.7,5.7,0,0,1,4,4,14.59,14.59,0,0,1,0,6c-.34,1.08-.69,1-1,2a7.09,7.09,0,0,0,0,4h1a1.64,1.64,0,0,1,1,0,1.77,1.77,0,0,1,1,1,2.37,2.37,0,0,1,0,2,1.88,1.88,0,0,1-1,1l-.54.52L240,67c.66,15.73.91,35.24,1.5,44.5,0,0-.25,4.85,3,47,.67,0,2.83.5,3.5.5v8l-1,1v1c.48,13.23,2.83,22.16,5,28,0,0,.16.44,5,13h8v15h-1v1l19,35h3v4h4V236l7-6v25l3,1v9h2V254l4-4v2h1V229h-2v-1l1-2h2V208h-1v-1h1v-4h1v-2h1v-3h1v-3s0-3,2-3,2,3,2,3v3h10v3h1v2h1v3h1v2h-1v18h6V213s0-3,1-3,1,3,1,3v13h7V208h-1v-2h1v-3h1v-2h1v-3h10v-3s0-3,2-3,2,3,2,3v3h1v3h1v2h1v3h1v1h-1v19h3v-7l9-6v87Z" transform="translate(-12.5 -15.5)"/></g><g id="Layer_3" data-name="Layer 3"><path class="cls-1 fill-svg-white" d="M223.5,210.5h22s-7-20-7-32h-9A79.07,79.07,0,0,1,223.5,210.5Z" transform="translate(-12.5 -15.5)"/><path class="cls-1 fill-svg-white" d="M203.5,265.5v-1c0-1,2-28,31-28s30,29,30,29h-11v-11l-3-1-4,3v9h-6v-5h-3v-12l-4-6h-4v23h-5v-7l-3-2v-9l-4,2v16Z" transform="translate(-12.5 -15.5)"/></g></svg>
  </div>
 </div>
<div>
 <div class="custom-content-fill">
  <h1>Title</h1>
   <p>Text Content. </p>
  </div>
 </div>
</div>

Also when I simplify the code to:

<div>
  <svg width="50%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 361 286"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs><title>paris</title><g id="Layer_2" data-name="Layer 2"><path class="cls-1 fill-svg-black" d="M13,301V247h1v-5s3,1,3,3a2,2,0,0,0,2,2s1,0,1,2v16h5V243a3.62,3.62,0,0,1-2-1,3.77,3.77,0,0,1-1-3h3V226l-2-3h2v-2l-3-3h3v-6H22l3-2v-2h2v2h5v-2h3v2h4v-2h3v2h4v-2h3v2h5v-2h3v2h4v-2h3v2h4v-2h3v2l3,2H71v6h3l-3,3v2h2l-2,3v13h3c0,.14.07,2.56-1.64,3.59A3.13,3.13,0,0,1,71,243v11l2-2h1v-6l5-4s3,2,5,0v-3h2v-1H85v-4h1a10.5,10.5,0,0,1,8-11v-8h0c-.23-1.07,1-2,1-2l0,0,0,0v0a2.89,2.89,0,0,1,.63.76A3,3,0,0,1,96,215v8a7.74,7.74,0,0,1,2,1,8.35,8.35,0,0,1,3,4s0-5,3-5v-4h-1v-4h1a22.06,22.06,0,0,1,2-9,20.1,20.1,0,0,1,2-3,7.82,7.82,0,0,1,2-2,18.59,18.59,0,0,1,2-1v-9s0-3,2-3v-5h1v5s2,0,2,3v9s7,2,8,14v1h1v4h-1v4a4.33,4.33,0,0,1,2,4c1-2.48,2.1-3.52,3-4l2-1v-8l1-1v0a1.87,1.87,0,0,1,1,2c-.11.92-.1,3.37,0,7a10,10,0,0,1,2,1,12,12,0,0,1,3,3,13.53,13.53,0,0,1,2,8h1v4h-1v3h1v-2h1v3h2v23h2V214l6-4,1-1v-6l4-4,4,1v11l14,3v2h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v3h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h3v2h-3v1h7v-4h2l20-36V210h7s9-20,9-42l-1-1v-8l3.5-.5c2.77-29.09,4.56-58.8,5-91q.21-15.75,0-31c-.17-.15-1.79-.64-2-1A3.45,3.45,0,0,1,226,34a2,2,0,0,1,2-2c.23,0,.58,0,1,0,.73,0,.86.07,1,0,.3-.15.48-.81,0-3a16.22,16.22,0,0,1-1-3,12.13,12.13,0,0,1,0-6,5.7,5.7,0,0,1,4-4h2a5.7,5.7,0,0,1,4,4,14.59,14.59,0,0,1,0,6c-.34,1.08-.69,1-1,2a7.09,7.09,0,0,0,0,4h1a1.64,1.64,0,0,1,1,0,1.77,1.77,0,0,1,1,1,2.37,2.37,0,0,1,0,2,1.88,1.88,0,0,1-1,1l-.54.52L240,67c.66,15.73.91,35.24,1.5,44.5,0,0-.25,4.85,3,47,.67,0,2.83.5,3.5.5v8l-1,1v1c.48,13.23,2.83,22.16,5,28,0,0,.16.44,5,13h8v15h-1v1l19,35h3v4h4V236l7-6v25l3,1v9h2V254l4-4v2h1V229h-2v-1l1-2h2V208h-1v-1h1v-4h1v-2h1v-3h1v-3s0-3,2-3,2,3,2,3v3h10v3h1v2h1v3h1v2h-1v18h6V213s0-3,1-3,1,3,1,3v13h7V208h-1v-2h1v-3h1v-2h1v-3h10v-3s0-3,2-3,2,3,2,3v3h1v3h1v2h1v3h1v1h-1v19h3v-7l9-6v87Z" transform="translate(-12.5 -15.5)"/></g><g id="Layer_3" data-name="Layer 3"><path class="cls-1 fill-svg-white" d="M223.5,210.5h22s-7-20-7-32h-9A79.07,79.07,0,0,1,223.5,210.5Z" transform="translate(-12.5 -15.5)"/><path class="cls-1 fill-svg-white" d="M203.5,265.5v-1c0-1,2-28,31-28s30,29,30,29h-11v-11l-3-1-4,3v9h-6v-5h-3v-12l-4-6h-4v23h-5v-7l-3-2v-9l-4,2v16Z" transform="translate(-12.5 -15.5)"/></g></svg>
</div>

It stops working also, seems like there's something that stops it working as soon as it's inside a div container in Shopify only, as works perfectly in JSFiddle

 

0 Likes

As @Jason states, please share a link to the store so that we can review it and diagnose. 

Want to customize or make changes to a theme? Hire me.
If my answer was helpful please Like and Accept Solution.
Email: oscardiazserrat@gmail.com
Behance: behance.net/starseedscreative
0 Likes
Explorer
83 11 22

https://reso-foods.myshopify.com/?key=758defa6cd148201383faf8abebffd0eeaf7cb6365e37b4ec3871a1eaff738...

 

History page is where the SVG is. only the CSS fx on the SVG are working.

0 Likes

Success.

Explorer
83 11 22

Figured it out,  for some reason Shopify blocked the styling of the SVG that was inside the <svg> tags, have no clue why it would do that, any SVG that is inserted to Shopify with <style> and <script> inside the SVG won't work, you need to remove the <style> tag and <script> tag from within the SVG and put them in the theme.scss.liquid and theme.js or separate file.

 

 

0 Likes