Animating a simple path outline withing a GSAP timeline

[adamhopkins]

Hello,

 

I'm planning on integrating a small logo animation to a website I'm working on. I intend to use GSAP for it's timeline function. It feels like a nice fit. However I am having some difficulty achieving the desired effect. The logo itself, as you can see by the Codepen link, is just simple with a basic circle outline path. What I'd like to happen is have the outline path animate in from the top in a 360 degree motion. I have tried different stroke arrays and alike but it hasn't has the effect I need. Adding the stroke creates a hollow outlined circle instead of a flat circular path I'm after. I have attached an image with a blue stroke to show what I mean. Adding a stroke naturally creates a line either side of the path.

 

My question is, do I need the GSAP's SVG plugin to achieve this?  It feels like it would be overkill for what I would need it for in this case. Is anyone able to to offer some assistance on how I can integrate this into a my GSAP timeline.

See the Pen jOqXbeN by adamhopkins88 (@adamhopkins88) on CodePen

[ZachSaucier]

Hey Adam. The issue, as is usually the case with SVG, is asset prep. You created the path with a fill. What you should create it with instead is solely a stroke. 

 

The easiest way to do that is to create the SVG using the <circle> element. Set the fill to transparent and the stroke to what you need it to be. Then you can use your vector editor to convert that to a path or use DrawSVG's .convertToPath() method to do the same thing. Once you've done that you should be able to animate the stroke as you need to, using DrawSVG (which is definitely the easiest to understand and set up) or not.