Jump to content


Manipulate an SVG Path by Animating Path Coordinates

Go to solution Solved by bigupjeff,

Recommended Posts

  • Solution

This is not a question. I couldn't find any examples doing exactly what I wanted, so I thought I'd share my demo solution with the GSAP forum for future SVG hackers. 🤘


This demonstrates a method for animating an SVG <path> by animating an object of JS variables which then get set as the d attribute as a string of coordinates using GSAP's onUpdate callback.


  • Animating JS variables.
  • Animating SVG <path> points and beziers.
  • Interactive path points with range input controls.
  • Selectable animations with checkbox controls.
  • Function for creating child timelines and and calling a master timeline dynamically.


All feedback welcome, I never stop learning!


Hope this helps somebody. 🙂


See the Pen rNdmqdO?editors=0010 by bigupjeff (@bigupjeff) on CodePen

  • Like 2
Link to comment
Share on other sites



Can we share it on twitter 👀

  • Like 1
Link to comment
Share on other sites

@Cassie Hell yes! It would be an honour 🙏😁

Link to comment
Share on other sites

Are you on there? If so pop me your @☺️

Link to comment
Share on other sites

Oo yeah, same handle as here: @BigupJeff


Thanks! 😁

Link to comment
Share on other sites

Nice job, @bigupjeff. Thanks for sharing!


Did you know that GSAP can animate a complex string that contains a bunch of numbers? It can also animate numbers inside an Array. Here's a quick demo: 


See the Pen dymVGOg?editors=0010 by GreenSock (@GreenSock) on CodePen


There's nothing wrong with the way you approached things - I just figured you might appreciate knowing about these capabilities because it may simplify your code. No need for an object with specific property names like that. But if doing it that way fits better with how you think intuitively, great!


I'm sure you already know this, but MorphSVGPlugin will handle all the complexities of animating between path data, even if there is a different number of points between the start and the end shape ("d" attribute). You can just feed the raw path data string in to a single tween and BOOM, it handles it all for you. 


Happy tweening!

  • Like 2
Link to comment
Share on other sites

I had absolutely no idea you could tween arrays 😂 - that's awesome! The object approach is industrial, so I'll probably have a play with array tweening and refactor. Succint code helps me sleep at night.


I did know about the MorphSVGPlugin though. This started off as a simple experiment for animating limbs (rubberhose style) so I thought "I'm just moving a couple of coordinates right?" but I can see how the MorphSVGPlugin could be perfect. Time to play!


Thanks for the info 🤘

  • Like 3
Link to comment
Share on other sites

@GreenSock you freak me out...
The first example, animating from ''0, 10, 20, 30, 40, 50" to "100, 90, 80, 70, 60, 50" seems rather straight forward, even if I would have hit my self 5 times over the head before trying such a stunt. 

But animating from "M 0,200 C 0,200 100,300 200,200 S 400,200 400,200" to ""M 0,200 C 0,200 100,300 200,200 S 400,200 400,200" without breaking a sweat seem to defy the laws of the universe. 



But if you give GreenSock half an hour or so...

  • Haha 2
Link to comment
Share on other sites

My thoughts exactly. I was already plotting ways to push/pop the path commands (M/C/S) in and out of the array. I should have known better. 😂

  • Haha 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.