Complex MorphSVG with gradients

[fripi]

Hi everyone, 

 

I need to make transitions of 3 "blobs", each has a different form and his own gradient.

I don't know if it is possible to make such a complex morph, I've been trying the whole afternoon, something moves but it doesn't morph...

 

Does someone have an idea ?

Thanks

See the Pen raVjWEo by fripi (@fripi) on CodePen.

[Rodrigo]

Hi,

 

The issue here is that you're morphing the shape that you're using as a mask/clip. The MorphSVG Plugin doesn't care about the fill of your shapes, it cares just about the shapes, that is the data the plugin process and handles.

 

Here is a simple demo of an SVG path with a gradient fill being morphed into another path:

See the Pen MYwmgbJ by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[fripi]

20 hours ago, Rodrigo said:

Hi,

 

The issue here is that you're morphing the shape that you're using as a mask/clip. The MorphSVG Plugin doesn't care about the fill of your shapes, it cares just about the shapes, that is the data the plugin process and handles.

Hopefully this helps

Happy Tweening!

Thank you, indeed I cleaned up my svg and made the change just to morph the 3 paths.

I found a way to animate the gradient in the svg itself in "yoyo" 1 time, can't figure out what to do to make it endless repeat... but it works already better.

But now isn't there a way to animate it with GSAP?

[Rodrigo]

Hi,

 

I read your las post a few times but I'm not sure I understand what you mean with this:

24 minutes ago, fripi said:

I found a way to animate the gradient in the svg itself in "yoyo" 1 time, can't figure out what to do to make it endless repeat... 

But now isn't there a way to animate it with GSAP?

What exactly are you trying to do here? Tween the gradient at the same time as the paths?

[fripi]

Yes @Rodrigo so the form morph is great, I can ad as many paths as I want, but I also need to change the gradients.

I Think I just found a solution, I modified my pen, Maybe there's a cleaner way to do but it seems to work,  last thing would be to scale and/or rotate juste the gradient, is that possible ? I tried to change rotation of "#linearGradient" but didn't work

[Rodrigo]

Hi,

 

You can use the Attributes Plugin for updating the X1, X2, Y1 and Y2 properties of the Linear Gradient def, something like this:

animTl
.to("#linearGradient", {
  attr: {
    x1: -14.5,
     x2: -14,
     y1: 625,
     y2: 626,
  },
  duration: 2,
  ease: "none"
})

If you want to animate the Gradient Transform, I believe you'll have to create a proxy object and use an onUpdate callback to apply the updated values to that property directly.

 

Hopefully this helps

Happy Tweening!

[fripi]

On 6/6/2025 at 6:33 PM, Rodrigo said:

Hi,

 

You can use the Attributes Plugin for updating the X1, X2, Y1 and Y2 properties of the Linear Gradient def, something like this:

If you want to animate the Gradient Transform, I believe you'll have to create a proxy object and use an onUpdate callback to apply the updated values to that property directly.

 

Hopefully this helps

Happy Tweening!

Great ! Thanks a lot, I changed some colors to better see the movement of the gradient and it works perfectly!