html - How to control the SVG animation which is based in CSS using JQuery?

Question

I wanted to sync the svg animation altogether, getting stuck with initializing multiple variables, and many of the groups have both paths as well as lines, and I want to make it follow according to the order, Its just going above my ahead, I just did it for letter "W", and want to initialize O,R,L,D and all other variables altogether so it animates one after the other, or you have a better method to do the same.

HTML Code

<g id="W-World" stroke="#003668" stroke-width="2" fill="none">
    <line x1="0.93" y1="0.482" x2="3.873" y2="7.937" clip-path="url(#clip-path-47)" />
    <line x1="3.088" y1="7.937" x2="5.966" y2="0.482" clip-path="url(#clip-path-46)" />
    <line x1="3.481" y1="0.482" x2="6.424" y2="7.937" clip-path="url(#clip-path-45)" />
    <line x1="5.639" y1="7.937" x2="8.517" y2="0.482" clip-path="url(#clip-path-44)" />
</g>

JQuery Code

let W = document.querySelector("#W-World").querySelectorAll("line")

W.forEach((l, i) => {
    l.setAttribute("style", `animation-delay:${i*1}s`)
})

The main thing is like after the W loads completely, I want to initiate the animation for O then R and so on for rest of the other letters, because some groups have lines and paths both, so I am very much confused how to proceed.

CodePen: https://codepen.io/ToxifiedM/pen/MWKeERr

Original Question: How Can I Make SVG Text Animation Seamless And Accurate?

Linked Question 1: A JQuery Function For SVG, To Execute 2nd Animation As Soon As, 1st Animation Completes?

Linked Question 2: To Control The Speed Of Multiple SVG Elements Using Jquery?

Answer 1

I'm demonstrating it only for the world group hoping you'll be able to do it for all the letters.

This is how I would do it:

I'm putting all the shapes in a group and I'm selecting those paths with document.querySelector("#world").querySelectorAll("*"); where the asterix * is selecting all the elements inside the group: lines, paths...

Instead of setting the stroke-dasharray and the stroke-dashoffset in css I'm seting them as presentational attributes and since I'm using javascript I'm calculating those values and setting those attributes in javascript:

let totalLength = s.getTotalLength(); 
s.setAttribute("stroke-dasharray",totalLength);
s.setAttribute("stroke-dashoffset",totalLength);

Where s is the svg shape.

let world = document.querySelector("#world").querySelectorAll("*");
let speed = 1;//change this to change the speed of the animation
world.forEach((s,i)=>{ 
    let totalLength = s.getTotalLength(); 
    s.setAttribute("stroke-dasharray",totalLength);
    s.setAttribute("stroke-dashoffset",totalLength);
    s.setAttribute("style", `animation-delay:${i*speed}s`)      
})

svg {
  width: 400px;
  left: 50%;
  transform: translate(50%);
}

#world *{
  animation: letter-animation 1s linear forwards;
}


@keyframes letter-animation {
    100% {
        stroke-dashoffset: 0;
    }
}

<svg id="WOYP" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 39.219 29.466">
  <defs>
    <clipPath id="clip-path-36">
      <path id="D2" d="M44.294,14.5v.076h0V14.6h0v.018h0v.018h0v.018h0v.019a3.616,3.616,0,0,1-.231,1.064,3.245,3.245,0,0,1-.731,1.139,3.8,3.8,0,0,1-1.277.836,4.856,4.856,0,0,1-1.876.327H39.061v-.59c.184.013.385.019.6.019h.558a3.588,3.588,0,0,0,1.455-.259,2.444,2.444,0,0,0,.927-.684,2.569,2.569,0,0,0,.487-.953,4.119,4.119,0,0,0,.139-.884v-.032h0v-.016h0v-.017h0V14.6h0v-.017h0v-.138a3.254,3.254,0,0,0-.148-.874,2.553,2.553,0,0,0-.487-.891,2.627,2.627,0,0,0-.886-.669,3.089,3.089,0,0,0-1.347-.264h-.707c-.123,0-.241,0-.35,0s-.19.008-.245.015v-.581h1.308a5.084,5.084,0,0,1,1.467.187,3.963,3.963,0,0,1,1.058.478,2.776,2.776,0,0,1,.71.66,3.453,3.453,0,0,1,.424.741,3.321,3.321,0,0,1,.21.7,3.623,3.623,0,0,1,.056.514h0v.006h0v.006h0v.006h0v.006h0V14.5Z" style="fill: none;clip-rule: evenodd" />
    </clipPath>
    <clipPath id="clip-path-37" transform="translate(-5.561 -10.291)">
      <path id="D1" d="M39.157,18.037H37.938a.56.56,0,0,0,.191-.176.493.493,0,0,0,.071-.277V11.639a.464.464,0,0,0-.262-.453h1.219v6.851Z" style="fill: none;clip-rule: evenodd" />
    </clipPath>
    <clipPath id="clip-path-38">
      <path id="L2" data-name="L2" d="M35.564,18.021H32.72v-.494c.11.014.262.031.455.051a4.959,4.959,0,0,0,.651.02q.465,0,.776-.015a2.383,2.383,0,0,0,.527-.076.907.907,0,0,0,.362-.186,1.374,1.374,0,0,0,.279-.358Z" style="fill: none;clip-rule: evenodd" />
    </clipPath>
    <clipPath id="clip-path-39" transform="translate(-5.561 -10.291)">
      <path id="L1" data-name="L1" d="M32.8,17.527v.494H31.559a.6.6,0,0,0,.206-.176.463.463,0,0,0,.076-.277V11.623a.46.46,0,0,0-.282-.453H33.07a.506.506,0,0,0-.2.171.486.486,0,0,0-.076.282v5.9Z" style="fill: none;clip-rule: evenodd" />
    </clipPath>
    <clipPath id="clip-path-40">
      <path id="R3" data-name="R3" d="M25.583,14.284a12.176,12.176,0,0,1,1.264.061c.174,0,.556.37.6.434a1.35,1.35,0,0,1,.181.215c.054.08.1.148.14.2l.591,1.012q.12.21.246.412c.083.136.165.266.245.392s.158.238.231.339.138.183.192.246a1.077,1.077,0,0,0,.192.174,1.933,1.933,0,0,0,.214.131,1.976,1.976,0,0,0,.244.118l-1.046.007a.772.772,0,0,1-.51-.162,1.449,1.449,0,0,1-.322-.336c-.254-.4-.476-.757-.67-1.08s-.376-.631-.549-.923c-.067-.1-.132-.209-.2-.314a1.767,1.767,0,0,0-.2-.276.941.941,0,0,0-.259-.2.712.712,0,0,0-.34-.083l-.366,0h-.245v-.366Z" style="fill: none;clip-rule: evenodd" />
    </clipPath>
    <clipPath id="clip-path-41">
      <path id="R2" data-name="R2" d="M26.822,14.608a11.217,11.217,0,0,1-1.588.027h-.016V14.2c.067,0,.138,0,.211.009s.149.013.241.016.195.005.311.005a1.457,1.457,0,0,0,.673-.138,1.226,1.226,0,0,0,.419-.341,1.263,1.263,0,0,0,.213-.434,1.607,1.607,0,0,0,.061-.395v0a1.656,1.656,0,0,0-.061-.395,1.258,1.258,0,0,0-.213-.433,1.215,1.215,0,0,0-.419-.341,1.457,1.457,0,0,0-.673-.138c-.116,0-.22,0-.311,0s-.172.009-.241.015-.144.011-.211.011v-.46h.619c.485,0,.93.04.985.046h0a1.961,1.961,0,0,1,.457.126,1.838,1.838,0,0,1,.528.327,1.789,1.789,0,0,1,.41.525,1.487,1.487,0,0,1,.159.588v.025h0c0,.029,0,.057,0,.085v.03c0,.028,0,.056,0,.085h0v.024h0a1.487,1.487,0,0,1-.159.589,1.785,1.785,0,0,1-.41.524,1.838,1.838,0,0,1-.528.327,1.907,1.907,0,0,1-.457.125Z" style="fill: none;clip-rule: evenodd" />
    </clipPath>
    <clipPath id="clip-path-42" transform="translate(-5.561 -10.291)">
      <path id="R1" data-name="R1" d="M25.314,18.03H24.085a.746.746,0,0,0,.191-.177.441.441,0,0,0,.081-.266V11.621a.463.463,0,0,0-.081-.271.6.6,0,0,0-.191-.172h1.229v6.429a.422.422,0,0,0,.08.246.73.73,0,0,0,.191.177Z" style="fill: none;clip-rule: evenodd" />
    </clipPath>
    <clipPath id="clip-path-43">
      <path id="O1" d="M22.38,14.637v.026h0v.081l0,.023a3.231,3.231,0,0,1-.367,1.385,3.556,3.556,0,0,1-.9,1.089,3.814,3.814,0,0,1-1.2.655,3.724,3.724,0,0,1-1.289.2,3.869,3.869,0,0,1-1.4-.3,3.818,3.818,0,0,1-1.169-.756,3.474,3.474,0,0,1-.791-1.133A3.228,3.228,0,0,1,15,14.763v-.119h0v-.022h0V14.6h0v-.047h0v-.024h0V14.38a3.256,3.256,0,0,1,.273-1.138,3.554,3.554,0,0,1,.756-1.109,3.749,3.749,0,0,1,2.8-1.073,4.05,4.05,0,0,1,1.265.257A3.668,3.668,0,0,1,21.241,12a3.433,3.433,0,0,1,.836,1.113,3.107,3.107,0,0,1,.3,1.237l0,.021v.131h0v.025h0v.025h0v.052h0v.025ZM21.265,14.4a3.982,3.982,0,0,0-.18-1.025,2.913,2.913,0,0,0-.529-.99,2.287,2.287,0,0,0-.821-.628,2.492,2.492,0,0,0-1.043-.218,2.667,2.667,0,0,0-1.038.2,2.42,2.42,0,0,0-.826.569,2.593,2.593,0,0,0-.549.905,3.436,3.436,0,0,0-.2,1.085v.232h0v.024h0V14.6h0v.024h0v.023h0v.025l0,.023v.027a3.52,3.52,0,0,0,.228,1.105,2.93,2.93,0,0,0,.615.98,2.5,2.5,0,0,0,1.778.762,2.549,2.549,0,0,0,1.023-.2,2.313,2.313,0,0,0,.811-.584,2.739,2.739,0,0,0,.534-.915,3.439,3.439,0,0,0,.188-1.021v-.185h0v-.044h0V14.6h0v-.022h0v-.022h0v-.022h0v-.022h0V14.4Z" style="fill: none;clip-rule: evenodd" />
    </clipPath>
    <clipPath id="clip-path-44" transform="translate(-5.561 -10.291)">
      <path id="W4" d="M11.676,16.41l.234.578c.236-.631.477-1.261.715-1.891q.222-.6.449-1.188t.409-1.063q.181-.476.308-.8c.084-.214.136-.348.156-.4s.05-.12.066-.16a.594.594,0,0,1,.061-.111.754.754,0,0,1,.086-.1.768.768,0,0,1,.151-.11h-1.03c.121.053.192.117.212.19a.481.481,0,0,1-.04.291c0,.007-.025.079-.076.216s-.118.319-.2.546-.18.483-.287.767-.216.573-.323.867Z" style="fill: none;clip-rule: evenodd" />
    </clipPath>
    <clipPath id="clip-path-45" transform="translate(-5.561 -10.291)">
      <path id="W3" d="M11.675,16.358Zm0,0h0l.011.029h0l.232.575c-.152.4-.311.82-.474,1.252L10.176,15.07q-.242-.6-.478-1.183t-.433-1.058q-.2-.474-.333-.793c-.09-.213-.146-.343-.166-.389a1.8,1.8,0,0,0-.176-.27.774.774,0,0,0-.348-.209h1.833a.3.3,0,0,0-.221.239.9.9,0,0,0,.03.35c0,.006.027.076.08.209s.123.308.207.524.179.464.287.744.218.562.332.848Q11.179,15.089,11.675,16.358Z" style="fill: none;clip-rule: evenodd" />
    </clipPath>
    <clipPath id="clip-path-46" transform="translate(-5.561 -10.291)">
      <path id="W2" d="M9.139,16.411l.234.578c.236-.632.477-1.261.715-1.891q.222-.6.45-1.189t.408-1.062c.122-.318.224-.584.308-.8s.137-.347.157-.4l.065-.16a.556.556,0,0,1,.061-.11.7.7,0,0,1,.086-.1.8.8,0,0,1,.151-.11h-1.03c.121.054.192.117.213.191a.488.488,0,0,1-.041.29c0,.007-.025.079-.076.216s-.117.319-.2.546-.179.483-.287.768-.216.573-.323.867Z" style="fill: none;clip-rule: evenodd" />
    </clipPath>
    <clipPath id="clip-path-47" transform="translate(-5.561 -10.291)">
      <path id="W1" d="M9.138,16.358Zm0,0h0l.012.029h0l.233.575q-.229.6-.475,1.252L7.639,15.07q-.242-.6-.478-1.183t-.433-1.058q-.2-.474-.332-.793l-.166-.389a1.8,1.8,0,0,0-.177-.27.764.764,0,0,0-.347-.209H7.539a.305.305,0,0,0-.222.239.938.938,0,0,0,.03.35c0,.006.027.076.081.209s.122.308.206.524.18.464.287.744.218.562.332.848Q8.642,15.089,9.138,16.358Z" style="fill: none;clip-rule: evenodd" />
    </clipPath>
  </defs>

  <g id="world" stroke="#003668" stroke-width="2" fill="none">
    <!--W-->
    <line x1="0.93" y1="0.482" x2="3.873" y2="7.937" clip-path="url(#clip-path-47)" />
    <line x1="3.088" y1="7.937" x2="5.966" y2="0.482" clip-path="url(#clip-path-46)" />
    <line x1="3.481" y1="0.482" x2="6.424" y2="7.937" clip-path="url(#clip-path-45)" />
    <line x1="5.639" y1="7.937" x2="8.517" y2="0.482" clip-path="url(#clip-path-44)" />
    <!--O-->
    <path d="M18.657,11.3a3.1,3.1,0,0,0-2.289.981,3.448,3.448,0,0,0-.458,3.858,2.78,2.78,0,0,0,2.747,1.7,2.961,2.961,0,0,0,2.813-1.7,3.514,3.514,0,0,0-.458-3.858A3.055,3.055,0,0,0,18.657,11.3Z" transform="translate(-5.561 -10.291)" clip-path="url(#clip-path-43)" />
    <!--R-->
    <line x1="19.374" y1="0.482" x2="19.374" y2="7.937" clip-path="url(#clip-path-42)" />
    <path d="M25.261,11.426h1.112a1.419,1.419,0,0,1,1.57,1.5,1.466,1.466,0,0,1-1.57,1.5H25.261" transform="translate(-5.561 -10.291)" clip-path="url(#clip-path-41)" />
    <path d="M25.065,14.435H26.5c.654,0,1.7,2.42,2.224,3.074l.261.261c.262.131,1.112.458,1.112.458" transform="translate(-5.561 -10.291)" clip-path="url(#clip-path-40)" />
    <!--L-->
    <line x1="26.754" y1="0.482" x2="26.754" y2="7.937" clip-path="url(#clip-path-39)" />
    <path d="M32.707,17.77h2.551a.5.5,0,0,0,.327-.13,1.886,1.886,0,0,0,.261-.72" transform="translate(-5.561 -10.291)" clip-path="url(#clip-path-38)" />
    <!--D-->
    <line x1="33.118" y1="0.482" x2="33.118" y2="7.937" clip-path="url(#clip-path-37)" />
    <path d="M38.94,11.492h1.766a3.118,3.118,0,0,1,2.224.915,3,3,0,0,1,.85,2.159,3.079,3.079,0,0,1-1.047,2.354,3.314,3.314,0,0,1-2.158.85H38.94" transform="translate(-5.561 -10.291)" clip-path="url(#clip-path-36)" />

  </g>
</svg>