how can I make a gradient animation to move on svg path specified

[VinayakPadwalkar]

I am new to GSAP and would like to make a pulse flow animation on the SVG path as specified in the codepen, I created this animation using CSS but I would like to use GSAP to create this same animation so that I could have another animation once the first one is completed. the second animation is highlighting the line for 2 sec once the pulse animation is completed to the end node. i.e. once the pulse animation is complete I would like to highlight the line for 2 seconds in blue color and then fade the blue line once again get the black line and restart the pulse animation for infinite time.

 

Can you please help me out to get this animation done .. thanks...

See the Pen bGOpVOY by Vinayak-Padwalkar (@Vinayak-Padwalkar) on CodePen

[Rodrigo]

Hi @VinayakPadwalkar and welcome to the GreenSock forums!

 

One alternative would be the DrawSVG Plugin:

See the Pen MWZyJeQ by GreenSock (@GreenSock) on CodePen

 

Another would be the MotionPath Plugin:

https://greensock.com/docs/v3/Plugins/MotionPathPlugin

See the Pen oNNEdRV by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening

[VinayakPadwalkar]

I was looking for an option that had a gradient animation on the lines, now Consider an example tree that has around 1000 lines, To get the flow-moving animation on the line we need to have 1000 more SVG path elements created just to get the flow animation which would be a poor designing approach only coz it will have 2000 elements which can be done via only one single animate tag. The best suited here would be to create a common gradient object and animate it on the path. Is there any capability present to animate the gradient?

[Rodrigo]

Hi,

 

That sounds like a tricky scenario, definitely not simple.

 

My first approach would be to use a global mask over the paths in order to create the effect. This requires to duplicate the paths of course, but is the simplest I can think of:

See the Pen LYMLQvw by GreenSock (@GreenSock) on CodePen

 

Other than that is using individual masks for each path or for certain groups of paths and do something similar. Then is individual masks for each path and use the Motion Path plugin for each mask, but if you are talking of thousands of lines, that approach will make me switch careers and become a farmer or a plumber, because it would meant a lot of work unless you can loop through your paths, create and add the mask to the SVG for each path, create a GSAP instance (or add one to a timeline) and feed that data to the MotionPath Plugin. Like I said not simple.

 

Hopefully this helps.

Happy Tweening!