html - A JQuery function for SVG, to execute 2nd animation as soon as, 1st animation completes?

Question

I applied the animation-delay technique, but to achieve a the handwriting effect animation, I had to cut the object wherever it intersects, and drew a path and converted it to a clipping mask, e.g. letter "W" divided into 4 parts and drew different paths for different part for the said above, and animating it, to give a clean handwriting effect, giving path a stroke width, It took me a lot more time as the font was too complicated.

Currently I am achieving the said animation using animation-delay, CSS function.

CSS Code

#W2-Path {
    animation-delay: .5s
}

#W3-Path {
    animation-delay: 1s
}

#W4-Path {
    animation-delay: 1.5s
}

#O-Path {
    animation-delay: 2s
}

#R1-Path-2 {
    animation-delay: 3.5s
}

#R2-Path-2 {
    animation-delay: 4s
}

#R3-Path-2 {
    animation-delay: 4.5s
}

#L1-Path-2 {
    animation-delay: 5s
}

#L2-Path-2 {
    animation-delay: 5.5s
}

#L3-Path-2 {
    animation-delay: 6s
}

#D1-Path {
    animation-delay: 6.5s
}

#D2-Path {
    animation-delay: 7s
}

I was thinking if there is any other way through which I can start the 2nd animation as the 1st animation completes, and it just keeps going on giving the animation more smoother effect and perfect timing, implementing JQuery?

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

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

Linked Question 1: To Control SVG CSS Based Animation Using Jquery?

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

Answer 1

I'm answering only for the latter W

I've changed the svg code you have, because it can be done in a more simple way.

You are wrapping every line in 2 groups. I'm using just the lines. Also you are using style="clip-path: url(#clip-path)" I've transformed this to a presentational attribute like so: clip-path="url(#clip-path)" because in javascript I want to set the animation-delay as inline style for the lines.

An other change: I'm using stroke-dasharray: 8 and stroke-dashoffset: 8 since 8 is the length of the lines for the letter W. I know the length of the lines because I've used the getTotalLength() method.

The stroke and the stroke-width are set only once for the group since the lines for the letter have the same style.

The javascript is selecting all the lines in a group and then is looping through the lines and setting the animation-delay:${i*1}s where i is the nth line. Please observe that the order of the lines in the group is from the first to the 4-th and not vice versa as you have them in your code.

let Wls = document.querySelector("#W").querySelectorAll("line");//all the lines in the W group

Wls.forEach((l,i)=>{
// for each line in the W group
// set the style attribute
  l.setAttribute("style", `animation-delay:${i*1}s`)
})

body {
background: white;
}

svg {
  width: 90vh; 
  border:solid;
}


#W line{
  stroke-dasharray: 8;
  stroke-dashoffset: 8;
  animation: letter-animation 1s linear forwards;
}


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

<svg id="WOYP" viewBox="0 0 9 9">
  <defs>
    <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" />
    </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" />
    </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" />
    </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" />
    </clipPath>
  </defs>

  <g id="W" stroke="#003668" stroke-width="2">
    <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>

</svg>