Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Animating along a portion of a path

Recommended Posts

Ive made this blue monster SVG and I'm trying to get these horns to animate out like they are growing. So far Ive been animating the x and y values of all the segments that make up the horns with staggerTo to make them appear to grow, but I would like them to appear curved - is there a way to do this by animating each segment along the same path with morphSVG? 


See the Pen erjRgE by puffywuffer (@puffywuffer) on CodePen



See the Pen erjRgE by puffywuffer (@puffywuffer) on CodePen

Link to comment
Share on other sites

Hi and welcome to the forums.


That sounds like a good idea to use MorphSVG to get the bezier data of a path and tween all the elements along the same path.


Here is a demo that shows something similar (without svg). Each element is tweened along the same path.

Then a timeline is built that tweens the progress() of those tweens to progressively increasing values:


See the Pen zjLjLV?editors=0110 by GreenSock (@GreenSock) on CodePen


With so many elements (ellipses) as you have you probably would want to build a loop that handles most of the heavy lifting. The key for this to work is to have the elements all start at the beginning of the path.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Hi @puffywuffer :)


Welcome to the forum and thanks for joining Club GreenSock.


Looks like I'm a bit slow so @Carl has whooped me and already given you the answer. I did see your question earlier and was tinkering with a demo, but got sidetracked until now. It's pretty much the same idea as Carl's demo, but it might be helpful so I'll throw it out here for you. 


See the Pen yjqpJj by PointC (@PointC) on CodePen


Happy tweening and welcome aboard.



  • Like 5
Link to comment
Share on other sites

This was a fun little challenge. Here's another technique that uses what I call a "chopped ease" (it's a fork of Craig's): 

See the Pen 456bb521b4480c66eb9c686e7ce1bc02 by GreenSock (@GreenSock) on CodePen


Normally an ease goes from 0 to 1 of the course of the tween, but here I'm creating a new ease for each tween that basically scales that value down. That way, you use a normal tween as if it's going along the whole path, but since the ease is chopped (well, scaled I guess), it'll go only partially to the end of the path (according to however much we chop). Probably more performant this way and more concise. 


Nice job @Carl and @PointC. Hope you don't mind me offering an alternate solution. :)


  • Like 6
Link to comment
Share on other sites

9 hours ago, GreenSock said:

Nice job @Carl and @PointC. Hope you don't mind me offering an alternate solution. :)


Well, I can't speak for Carl (because he's way smarter than I am), but I always enjoy a lesson from Jack's JavaScript University. Sometimes the lessons even get through my thick skull. :D


That's pretty neat Jack. I wouldn't have figured that out with a thousand attempts. I thought this question was an interesting technique and a fun challenge. I'm somewhat surprised it hasn't come up before now, but maybe it has and I just missed it. It could be quite handy in some situations. Thanks for the lesson.



  • Like 2
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.