Path masking or clip path - where to start?

[damonjentree]

Hello! 

This is my (obviously) my first post to the forums. I haven't worked with greensock since the flash days (yeah it's been a while).

I have attached my codepen - it doesn't do anything, but I was hoping to illustrate what I'm trying to do with it.  The lighter stroke I want to slowly animate from left to right. 

Back in the flash days, I would simply create a little mask to only reveal a small section of the stroke and then animate the mask to make it look like the line was moving across a path.

 

I think what I am looking for is something along the lines of this post:

I'm not looking for someone to do this, I'm just not sure where to even start. Thank you for any suggestions!

 

See the Pen JpWOgE by damonjentree (@damonjentree) on CodePen

[PointC]

Hi @damonjentree

 

Welcome to the forum.

 

If I understand your question correctly, the DrawSVG plugin is made for that type of animation. Here's a fork of your pen:

 

See the Pen NypXYW by PointC (@PointC) on CodePen

 

That would be the easiest way to animate the line and you wouldn't need a mask or clip-path. That is a Club GreenSock plugin, but you can try it for free on CodePen. Here's some more info about the club.

https://greensock.com/club

 

Hopefully that helps. Happy tweening.

[damonjentree]

Oh my gosh - this is exactly the shove I was looking for. I can't thank you enough!