Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
damonjentree

Path masking or clip path - where to start?

Recommended Posts

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

Link to post
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.

https://greensock.com/club

 

Hopefully that helps. Happy tweening.

:)

  • Like 5
Link to post
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 post
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.

×