Experimenting with MorphSvg and Clip path

[dadostudio]

Hello everyone, I'm basically trying to animate an svg circle into a more complex svg which I'm using as a clip-path for a background.

Basically the issue I'm having is that morph Svg won't morph the shape giving me the ERROR: malformed path: undefined

I've tried cleaning the svg with SVGOMG but nothing changed. I'm attaching a minimal demo of what I'm trying to achieve.

Can you help me? Thanks a lot!

 

 

See the Pen oNmWPGK by luigi-basile (@luigi-basile) on CodePen

[Rodrigo]

Hi,

 

Maybe something like this:

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

 

The main issue is that you are morphing the circle and not the path from the ClipPath element. Then you gave the clipPathUnits attribute, the problem there seems to be the fact that your SVG doesn't have a viewBox defined, so either removing the attribute or changing it to clipPathUnits="userSpaceOnUse" seems to work the way you intend.

 

Hopefully this helps.

Happy Tweening!

[dadostudio]

Hi Rodrigo, thanks for the help, at least it works now, but it still doesn't look the way I want. I'll try to explain it better:

Basically I'd like to transform the round shape into the clip path with the ID clipPath1, which clips the background.

How can I achieve this result? Is it something that can be done?

[Rodrigo]

Hi,

 

That is exactly what he demo is doing. Keep in mind that the path inside the clipPath element is really small. Have you seen that just as a path on an SVG? Forget about GSAP and morphing, just look at the path as a regular SVG path, is a 1px by 1px square. I'd suggest you to get your SVG to look exactly the way you intend first, then create the animation using the MorphSVG Plugin and then use it as a clip mask for another element.

 

d="M1,0.315 L1,0.97 C1,0.988,0.994,1,0.987,1 L0.062,1 L0.015,1 C0.007,1,0.001,0.988,0.001,0.97 L0.001,0.377 C0.001,0.359,0.007,0.345,0.015,0.345 L0.086,0.345 C0.093,0.345,0.1,0.331,0.1,0.314 L0.1,0.033 C0.1,0.016,0.106,0.002,0.114,0.002 L0.599,0.002 C0.607,0.002,0.613,0.016,0.613,0.033 L0.613,0.055 C0.613,0.072,0.619,0.087,0.627,0.087 L0.804,0.087 C0.812,0.087,0.818,0.101,0.818,0.118 L0.818,0.252 C0.818,0.269,0.824,0.283,0.832,0.283 L0.987,0.283 C0.994,0.283,1,0.297,1,0.315"

See all the values in your path. They are all either 1 or less than one, so your actual path is smaller than a square of 1px by 1px.

 

GSAP is doing exactly what's supossed to.

 

Happy Tweening!

[dadostudio]

Ok Rodrigo, I corrected the svg path values and now it works, but basically I'd like to revert the morph.

I'd like to start from the circle and then transform it in the clip path.

I updated the Pen:

See the Pen bGzWQJE by luigi-basile (@luigi-basile) on CodePen

Thanks!

[Rodrigo]

Just flip the paths and update the ids accordingly:

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

 

Hopefully this helps.

Happy Tweening!

[dadostudio]

Thanks a lot Rodrigo. I'm still experimenting and wanted to try to morph the shape from a rounded rectangle to the final shape, but I can't seem to use 'rect'.

When I try to morph the shape now it doesn't give out any errors, but nothing happens in the same time.

I'm attaching the updated pen.

 

See the Pen rNPwZLp by luigi-basile (@luigi-basile) on CodePen

[Rodrigo]

Hi,

 

You're doing the exact same mistake you were doing in your previous demo: You are morphing the rectangle and not the clip path. On top of that your clip path has some big dimensions but your SVG's view box is 100 by 100 so a lot of your clip path won't be visible. Finally your rectangle shape doesn't have dimensions in it, just the x and y positions and the corner radius. Although your corner radius is 0 so basically that's a regular rectangle so no need for that particular attribute IMHO:

<rect id="rounded-rectangle" x="0" y="0" rx="0" fill="#FFDD00" stroke="black" />

You have to specify a width and height as well:

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect

 

Here is a fork of your codepen:

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

 

Hopefully this helps.

Happy Tweening!

[dadostudio]

Hi Rodrigo, thanks a lot for the solution, but I'd like to transform the square into the clip path shape, I know it works in reverse but I have to transform the square into the clip path shape. Is it possibile?

[Rodrigo]

Hi,

 

Just as I posted in my previous to last post just flip the paths in order to have the clip path start with the rectangle and then morph it to the other shape.

 

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

 

Happy Tweening!

[dadostudio]

Thanks a lot Rodrigo, I can see my mistake now.