I can't get MorphSVG to work

[Shalaw Fatah]

Hello, 

I recently joined the club and I can't get the MorphSVG to work. I include both gsap.min and Morph.SVG plugin inside my project folder and refer to them through scripts, also my SVG file have layers that can change, but nothing happens when I write my code. 

The code inside the Codepen file is copied directly from my local folder, so I know I haven't forked Codepen for MorphSVG but I do have the plugin in the project folder.

Please help.

Best,

See the Pen LYpqPrR by shalaw1889 (@shalaw1889) on CodePen

[PointC]

Hi @Shalaw Fatah 

 

Welcome to the forum. Thanks for joining Club GreenSock.

 

You're tying to morph the groups but MorphSVG works path to path so you need to target them directly. You'll also want to use the plugin to convert the polygon to a path. Finally, you'll want to set the star visibility to hidden. Here's a fork of your pen with those changes.

 

See the Pen BaoMavB by PointC (@PointC) on CodePen

 

Hopefully that helps. Happy tweening and welcome aboard.

 

PS You can move the duration inside the vars like this:

gsap.to(".cls-1", { duration: 3, morphSVG: ".cls-2" });

 

 

[Shalaw Fatah]

20 minutes ago, PointC said:

Hi @Shalaw Fatah 

 

Welcome to the forum. Thanks for joining Club GreenSock.

 

You're tying to morph the groups but MorphSVG works path to path so you need to target them directly. You'll also want to use the plugin to convert the polygon to a path. Finally, you'll want to hide set the star visibility to hidden. Here's a fork of your pen with those changes.

 

 

 

 

Hopefully that helps. Happy tweening and welcome aboard.

 

PS You can move the duration inside the vars like this:

gsap.to(".cls-1", { duration: 3, morphSVG: ".cls-2" });

 

 

Sorry to be pain, I got it morphing, just if you can be kind enough to tell me the best way to hide the star, is it through CSS, in Illustrator or in JS? 

[PointC]

You can just do that with the CSS like I did in my fork of your demo.

 

#star {
  visibility: hidden;
}

Happy tweening.

 

[Shalaw Fatah]

I hid the the star through its ID in the CSS, now it works perfectly, hopefully that's the right way. Many thanks @PointC you are great man.

[OSUblake]

11 hours ago, Shalaw Fatah said:

I hid the the star through its ID in the CSS, now it works perfectly, hopefully that's the right way

 

Just put it inside <defs></defs>. It prevents it from being rendered.

 

 

<defs>
  <polygon class="cls-2" points="111.34 127.19 69.04 106.41 27.94 129.47 34.63 82.83 0 50.87 46.43 42.81 66.13 0 88.13 41.67 134.94 47.17 102.1 80.98 111.34 127.19" />  
</defs>