Jump to content
Search Community

WARNING: cannot morph a <CLIPPATH> SVG element. Use MorphSVGPlugin.convertToPath(elementOrSelectorText) to convert to a path before morphing.

ohem test
Moderator Tag

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

Hi, I was testing out something with MorphSVG: 

 

And I'm getting this error in the console: WARNING: cannot morph a <CLIPPATH> SVG element. Use MorphSVGPlugin.convertToPath(elementOrSelectorText) to convert to a path before morphing.

 

I know that morphing clip paths is possible because I've seen it here: 

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

 

But in this case, it doesn't seem to work on my end.  I tried adding convertToPath but that gets rid of the clip path altogether.

 

Any suggestions are appreciated.  Thanks!

See the Pen NrxKWo by ohem (@ohem) on CodePen

Link to comment
Share on other sites

Hi ohem :)

 

Just change the morph target to the path name inside the clip-path instead of the clip-path id. Once I did that, it all worked fine.

// change this
.to("#clipper", 1, {morphSVG:".smoothCircle"}, "endIntro")
//to this
.to("#clip", 1, {morphSVG:".smoothCircle"}, "endIntro") 

Happy morphing.

:)

  • Like 3
Link to comment
Share on other sites

Hi ohem :)

 

Just change the morph target to the path name inside the clip-path instead of the clip-path id. Once I did that, it all worked fine.

// change this
.to("#clipper", 1, {morphSVG:".smoothCircle"}, "endIntro")
//to this
.to("#clip", 1, {morphSVG:".smoothCircle"}, "endIntro") 

Happy morphing.

:)

Weird!  I swear I tried that in one of my attempts.  Thank you, glad it's working now.  :)

  • Like 1
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.
×
×
  • Create New...