I successfully created an SVG animation using JSFiddle, but when I transferred the SVG to Shopify, the Javascript that animates the path stopped working.
It seems like the issue is with the JavaScript targeting all paths on the page instead of just the specific paths in my Paris-themed SVG.
I attempted to modify the target from
document.queryselectorall('path');document.getelementbyclassname("cls-1");cls-1 represents the class of the paths I want to focus on. Are there any other parts of the code that need adjustment so that this JavaScript only affects paths with the class cls-1?
Thank you!
let drawSVG = function() {
let paths = document.getElementsByClassName("cls-1");
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";
});
Here is HTML SVG for testing/example:
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 361 286" width="100%"><title>test "cls-1"</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>