Jump to content
Search Community

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

VinayakPadwalkar test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

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:


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


Hopefully this helps.

Happy Tweening

Link to comment
Share on other sites

  • 2 weeks later...

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?

Link to comment
Share on other sites

  • Solution



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!

  • Like 1
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.
  • Create New...