How to control the animation speed for multiple SVG elements using jQuery?

Question

How can I set varied speed for multiple SVG elements? In the current script it\'s applying speed = .5; for all the paths and lines that are under the parent gro

Answer 1

In this case instead of setting the value of speed as a global variable I'm calculating the speed for every shape.

For the delay I am using a global variable let delay = 0; and then I'm incrementing the value of the delay in the forEach: delay += Number(speed);

For the speed in the svg I'm using a data-speed attribute and for each shape let speed = s.parentNode.dataset.speed;

let svg = document.querySelector("svg")
let woyp = document.querySelector("#World-On-Your-Plate")
let shapes = woyp.querySelectorAll("g line, g path");

let delay = 0;

shapes.forEach((s, i) => {
    let totalLength = s.getTotalLength();
    let speed = s.parentNode.dataset.speed;
    delay += Number(speed);
    s.setAttribute("stroke-dasharray", totalLength);
    s.setAttribute("stroke-dashoffset", totalLength);
    s.setAttribute("style", `animation-duration:${speed}s;animation-delay:${delay}s`)
})

#World-On-Your-Plate * {
    animation-name: letter-animation;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}

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

svg{width:90vh}