Quick Question

[hacu95 0 Likes (Newbie)]

Im trying to animate the Fill/Stroke of my SVG but its not animating it just snaps in no matter what

See the Pen jVpNoE?editors=1010 by cabello986 (@cabello986) on CodePen

[OSUblake 9,990 Likes (Superhero)]

"none" is not a color. Try "transparent". Graphic elements also have fill-opacity/stroke-opacity properties you can animate.

[hacu95 0 Likes (Newbie)]

Thanks,now i ran into this problem trying to animate the stroke 

See the Pen jVpNoE?editors=1010%C2%A0 by cabello986 (@cabello986) on CodePen

and here is what i wanted to achieve

See the Pen vyavPX?editors=1010 by cabello986 (@cabello986) on CodePen

Why is mine doing some weird strokeDasharray effects?

[PointC 8,599 Likes (Superhero)]

Hi hacu95 

 

Welcome to the GreenSock forums.

 

You've created an animation fight between GSAP and CSS. Please remove this from line 1of your CSS:

*{
  transition: 2s all ease-in-out;
}

It's not usually a good idea to mix CSS and GSAP animations. Once you remove that, it should work correctly for you. 

 

Happy tweening.

[hacu95 0 Likes (Newbie)]

Thanks alot! to both of you