Jump to content


Smooth Morph SVG

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



I'm trying to get a smooth animation with MorphSVG:


The steps should as smooth as these ones:

See the Pen ZbOjRO by waterfallmedia (@waterfallmedia) on CodePen

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

(see the cape animated with waveSVG which is not supported)

See the Pen meepJE by osublake (@osublake) on CodePen


You can see a stop between the steps in my animation. Please, do you have any idea of what I could do to not feel the steps in the animation?



See the Pen pEYkRg by carlbren (@carlbren) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


Thanks for the demo.


I slowed down the demo and added different colors for each shape to better tell what each shape looks like:




I'm not sure I know what you mean about steps. Each time you morph to a new shape the points have to travel different distances in the same amount of time so there is going to be what appears to be abrupt changes in speed while different curve segments morph.


If there is something else going on that I am missing please feel free to elaborate what you mean about the steps.

  • Like 2
Link to comment
Share on other sites

Hello Carl!


Thanks for your reply!


By step I meant animation, for example there are 3 animations (steps) in the timeline.

In the timeline, we can feel visually the transition between each animation. The transitions are not smooth as it is with

See the Pen ZbOjRO by waterfallmedia (@waterfallmedia) on CodePen

for instance.

So I'm wondering if there is a way to get smooth transitions.

Link to comment
Share on other sites

Yeah, this seems to be as I explained previously. I'm not sure there is a way to blend that all together. Its as if you moved an element 400 pixels to the right and then back 200 pixels. When it changes direction there is going to be a noticeable change in direction. At each step each point in the path is being told to go somewhere else and some are moving greater distances than others so there are going to be noticeable changes in speed. I'm really not sure there is a way to make it all blend together as you are hoping.

  • Like 1
Link to comment
Share on other sites

Hi carleaql  :)


Something you could try would be to add easing to each part of your morph. Since you have a linear ease on your pen, it seems to stop and start into the next move rather abruptly. By adding a simple in/out ease to each step you can have a little more organic looking animation. You can play with various Powers until you find one that you like. It's not perfect, but might work for you.


Here's a fork of Carl's pen. I just duplicated the SVG and timeline so you could see a side by side comparison of the difference.


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


Hopefully that helps a bit.


Happy tweening.


  • Like 1
Link to comment
Share on other sites

Great suggestion, Craig.

Link to comment
Share on other sites

Thanks guys for your help! Really appreciated! :)


Based on what you said, I'll try to animate one point at the time or to do something equivalent.

If I get the desired result I'll share a demo here.

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.