Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
merlin

MorphSVG and SVG clipPath

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

That's it! Thanks Jack :)

  • Like 1
Link to comment
Share on other sites

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

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.
×