Jump to content


Path masking or clip path - where to start?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts


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

Link to comment
Share on other sites

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.



Hopefully that helps. Happy tweening.


  • Like 5
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.