Jump to content
GreenSock

foxhound3311

MorphSVG Not Working - What did i do wrong?

Go to solution Solved by PointC,

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

Hey guys,

 

I just joined the club membership program to unlock the features of MorphSVG. I've been just trying to follow the basic lessons to see if I can even get the plugin to work. Sadly it is not.

 

My rect was turned into a primitive shape, and I read that MorphSVG plugin cannot work with anything but paths. I used the "converToPath" script successfully turning my shapes into paths. Sadly they are still not morphing.

 

Could someone please take a look at my codepen and let me know? 

 

Thank You :) 

See the Pen yMOJXZ by stinkytofu3311 (@stinkytofu3311) on CodePen

Link to comment
Share on other sites

  • Solution

HI foxhound3311 :)

 

Welcome to the GreenSock forum and thank you for joining Club GreenSock.

 

You're really close. Just a couple small mistakes.

 

1. There is a typo in your tween. It's TweenMax, not TeenMax. 

2. #end is a group. You need to target the path in that group which has a class of .st1

// switch this
TeenMax.to("#start", 2, {morphSVG:"#end"});

// to this
TweenMax.to("#start", 2, {morphSVG:".st1"});

If you make that change, it should start working correctly.

 

Happy tweening and welcome aboard.

:)

  • Like 4
Link to comment
Share on other sites

Thank you so much PointC! That fixed the problem.

 

I was hoping you could look at this next problem I'm experiencing now. I attached a findShapeIndex to the SVG because I noticed it was morphing oddly. It seems that my index point is slightly off-centered which is causing the weird morph. Do you have any advice to avoid this issue? 

Link to comment
Share on other sites

o.k. - I see what's happening.

 

Your .st1 path is only a stroke of a star shape that was turned into a compound path. It has no fill which is why the morph looks odd. You can see what I mean by turning off your rectangle and setting a fill on the star shape. Just pick something bright so it's obvious. See how only the outline is filling? It's technically a path, but looks like a stroke. The morphSVG plugin is doing its work correctly, but it's basically morphing from a filled rectangle to an outline of a star. You'll need to redo the star path to get this to look right. 

 

Please give that a try and let me know if you have any more difficulty.

 

Happy tweening.

:)

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