Animating along a portion of a path

[puffywuffer]

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.

 

blueHorn.svg

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

[Carl]

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.

[PointC]

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.

 

[puffywuffer]

Thanks for the help and for the warm welcome!

See the Pen JvBeXp by puffywuffer (@puffywuffer) on CodePen.

 

[GreenSock]

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.

 

[PointC]

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. 

 

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.