MorphSVG and SVG clipPath

[merlin]

I’m trying to animate an SVG path which I use as a clip-path into another path with MorphSVG but it seems to be that my first path won’t dissolve completely in the other?

 

Inside of the SVG called `#clippert` there are two paths, #morph-to and #clippert-path which I am trying to morph in a loop (where they yoyo as well)

 

I've tried it like this:

const tl = new TimelineMax()
tl
	.to("#clippert-path", 1, {
		morphSVG: {
			shape:"#morphTo",
		},
		repeat:-1,
		yoyo:true,
	})	

 

But that doesn't seem to do it for the full path?

See the Pen MMbXOQ by meesrutten (@meesrutten) on CodePen

[GreenSock]

I'm not quite sure what it's supposed to look like, but perhaps the problem is that you've got TWO paths inside the <clipPath>, but you don't want/need the "#morphTo" in there. In other words, it's using both of those paths for clipping simultaneously. You could just drop the "#morphTo" inside a <defs> or you could feed the string in directly. Either way. Is this more like what you wanted?:

 

See the Pen 085ba2d7914407e064c8be254f971af6 by GreenSock (@GreenSock) on CodePen

[merlin]

That's it! Thanks Jack

[GreenSock]

Anytime! Thanks for being a Club GreenSock member, @merlin