Jump to content


Linear Gradient on stroke of Path doesn't work

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

Hi All!  I am new to GSAP and it seems really powerful, but I have hit a bit of a snag. I would really like the stroke of the path to have a linear gradient on it. However, whenever I add a linear gradient to it, the animation stops working. To be Clear I do not want to actually animate the gradient, it remains the same. Any help would be great

See the Pen dNWqQe by Ella33 (@Ella33) on CodePen

Link to comment
Share on other sites

I don't know if you can do it in GS but you can do it in illustrator.  

Link to comment
Share on other sites

Hi lisafrank66@gmail.com :)


Welcome to the GreenSock forums.


Having a gradient follow the stroke is going to be a bit tricky. We had a similar question that could guide you in the right direction. Please check out this thread:




In particular, please see what Blake had for a solution:




Hopefully that helps a bit.


Happy tweening.


  • Like 2
Link to comment
Share on other sites

What I did is pretty much the only way to make a gradient follow a path in SVG, but I have a feeling that it would be incredibly slow to morph as the gradient would have to be recalculated on every frame.

  • Like 2
Link to comment
Share on other sites

After looking at the way you did that gradient Blake, I was also wondering how a morph would perform. It does seem like it would be a lot to calculate.

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.