20 replies

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

outerWires

outerWires

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);
  }
}

.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!

CodePenXIPureGamer

OJaQqjz

...

How can I modify My SVG Animation?

Similar Threads

Similar Threads

Similar Threads