Kevin Powell - Community•12mo ago

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! ❤️

XIPureGamer

CodePen

OJaQqjz

...

10 Replies

Rook•12mo 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•12mo 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•12mo ago

the css code of your first message

XIPureGamer•12mo 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•12mo 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•12mo 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•12mo 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•12mo ago

Yeah I'm glad I discovered GSAP > added it to My site tbh It's pretty cool

Rook•12mo ago

yeah, i need to learn more about it, i've mostly used framer motion

XIPureGamer•11mo ago

https://discord.com/channels/436251713830125568/1131038177432444969

Gaming

Programming

How can I modify My SVG Animation?