Is there a way to customize the speed of multiple SVG elements individually? Currently, the script sets speed = .5; for all paths and lines under the parent group
<g id="World-On-Your-Plate">To simplify and control the animations better, I've categorized the child elements of the SVG into separate groups: <g id="World">, <g id="On-Your">, and <g id="Plate">.
I'd like to set a different speed for the child group <g id="On-Your"> as speed = .3;, while maintaining the speed at .5 for the <g id="World"> and <g id="Plate"> groups.
HTML Code
<!-- SNIPPET CODE HERE -->CSS Code
#World * {
animation: letter-animation .7s linear forwards;
animation-timing-function: ease-in-out;
}
#On-Your * {
animation: letter-animation .5s linear forwards;
animation-timing-function: ease-in-out;
}
#Plate * {
animation: letter-animation .7s linear forwards;
animation-timing-function: ease-in-out;
}
@keyframes letter-animation {
100% {
stroke-dashoffset: 0;
}
}
JQuery Code
// JQuery code snippet hereCodePen: View on CodePen
Original Question: Link to Original Question
Linked Question 1: Second Linked Question
Linked Question 2: Third Linked Question