Linear Gradient on stroke of Path doesn't work

[[email protected]]

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.

[jimeast]

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

[PointC]

Hi [email protected] 

 

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:

 

https://greensock.com/forums/topic/14743-multi-colored-lines-in-svg/

 

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

 

https://greensock.com/forums/topic/14743-multi-colored-lines-in-svg/?p=63134

 

Hopefully that helps a bit.

 

Happy tweening.

[OSUblake]

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.

[PointC]

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.