MorphSVG Fluidity

[carlfmichel]

I have a series of duck curves that I'm morphing between, but I would like to get them more fluid. Each curve has a series of 12 variations it is morphing between. After the 12th variation, it loops and starts a 1 again. Each variation is just slightly different from the last. When you watch the curves you can tell when the morph ends because there is a slight pause. I do not want that. Is there a way to make the morph look more fluid? I have experimented with different easing options with no luck. Or if anyone has a better idea on how to animate these curves using Greensock, that would be awesome too. Thank you in advance!

 

Here is my working test on Codepen

See the Pen RweeeVb by carlfmichel (@carlfmichel) on CodePen

[GreenSock]

It's difficult to troubleshoot a live site - a CodePen would be much easier and faster to offer input on. 

 

It looks like you only have an ease applied to some of your animations. I'd recommend applying one to all of them. Maybe a "power1.inOut". The "sine.inOut" might work too. You may want to tweak the durations as well (slow them down).

 

The only other thing I can think of is to animate each individual anchor and control point separately with different timings which is much more complex but certainly doable. It's beyond the scope of help we can provide for free in these forums, but you're welcome to contact us if you'd like to explore paid consulting options. I bet you can get it looking pretty smooth, though, with just MorphSVG.

 

Thanks for being a Club GreenSock member! 🥳💚

[carlfmichel]

Thank you for your insights and suggestions. I just moved my test to codepen and edited my initial post.

[GreenSock]

Yeah, you could simplify your code a bit and make it easier to experiment with by using defaults on the timelines for the ease: 

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

 

I'm not sure why you're using different durations on every other tween, but that'll obviously make the transitions appear to move faster, then slower, then faster, etc. Some of this has to do with the fact that you're moving the points various distances at different rates. So again, if you want super tight control of all the movement of every anchor (so that you could, for example, measure the distance they're moving and then calculate the corresponding duration so that they're always moving at a constant speed), you'd have to handle that in a completely different way and of course it'd be far more complex but entirely doable.

 

Good luck!