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 :
So can someone help out?
Please and Thanks in advance! ❤️10 Replies
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)"]
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 😅)
the css code of your first message
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?
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
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?
both
you don't have to use GSAP, but it would be helpful due to the plugin and all the timeline stuff it adds
Yeah I'm glad I discovered GSAP > added it to My site tbh
It's pretty cool
yeah, i need to learn more about it, i've mostly used framer motion