How can I modify My SVG Animation?

Hi guys 👋 I need some help. I'm trying to tweak this HTML/CSS animation (https://codepen.io/XIPureGamer/pen/OJaQqjz) to make it so that the outerWires are animated, so that they.. "grow". What I mean by this is, make it so that they "grow" start to finish in a sort of, linear way. Like branches on a tree or something, idk. I've tried adding classes (Like the one below) into the CSS file to try and scale the outer wires with/as keyframes buuuut..., I just cannot get the outer wires to animate what-so-ever sadge :
.outerWires {
/* existing CSS properties */
animation: grow 2s linear forwards;
}

@keyframes grow {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
.outerWires {
/* existing CSS properties */
animation: grow 2s linear forwards;
}

@keyframes grow {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
So can someone help out? Please and Thanks in advance! ❤️
10 Replies
Rook
Rook16mo ago
none of the elements have the class outerWires, which is why nothing is getting animated even if they did though, i don't think it would give you the effect you want. what you're trying to do is change how much of a path is drawn, not scale it https://codepen.io/Therason/pen/OJaQqKo here's a basic example with gsap and its DrawSVG plugin. you're gonna have to do a lot of work cleaning up that svg, adding correct classes, and timing things correctly to show what i mean by the animation btw, change .outerWires to path[stroke="var(--outerwiresStroke)"]
XIPureGamer
XIPureGamer16mo ago
In the CSS Code (If so, what line(s)) or the JS/GSAP line of code You wrote? (Sorry late reply btw, kinda fell asleep lol 😅)
Rook
Rook16mo ago
the css code of your first message
XIPureGamer
XIPureGamer16mo ago
Oh that, right ok As You aware, the outer-wires are 'growing' simultaneously in the codepen above, I want to make it so that randomly-selected outer-wires 'grow' at different times/intervals; so say for example, some of wires begin to 'grow', then about 2-3 seconds later, some more randomly-selected outer-wires start 'growing', then the rest get selected, then they start 'growing' I dunno... another 2-3 seconds later; ya see what I mean? 😅 How would I go about doing this? Would I need to use js or css or even scss?
Rook
Rook16mo ago
use JS to randomly select wires and randomly select an interval like i said, you are gonna have to do a lot of cleaning up of that SVG
XIPureGamer
XIPureGamer16mo ago
Oh yeah ik, for sure, just trying to figure out how do add/implement features bit-by-bit, then I'll come back and tidy up the code (css/js) I assume You mean GSAP? or did You mean vanilla js?
Rook
Rook16mo ago
both you don't have to use GSAP, but it would be helpful due to the plugin and all the timeline stuff it adds
XIPureGamer
XIPureGamer16mo ago
Yeah I'm glad I discovered GSAP > added it to My site tbh It's pretty cool
Rook
Rook16mo ago
yeah, i need to learn more about it, i've mostly used framer motion
Want results from more Discord servers?
Add your server