Gsap Morph Plugin Issue : WARNING: a <POLYGON> cannot accept path data

[romain.gr]

Hi,

 

I have a weird issue, it seems that apparently some of my polygon points are not valid (see Codepen). I can't figure out what's wrong as those value are generated by Sketch app :

 

<svg width="92px" height="100px" viewBox="0 0 92 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Touch-Bar-Copy-2" transform="translate(-8.000000, 0.000000)" fill="#D8D8D8">
            <polygon id="Path-4" points="34 0 55 21 8 100 100 100 100 0"></polygon>
        </g>
    </g>
</svg>

 

Then converted in percent, so :

 

.34 0 .55 .21 .8 1 1 1 1 0

 

I said "some" because some other works .eg :

 

Not valid :

 

var step1 = '.21 0 .55 .89 .08 1 1 1 1 0';

var step3 = '.34 0 .55 .21 .08 1 1 1 1 0';

 

Apparently valid :

 

var originalStep = '.08 0 .55 .21 .13 1 1 1 1 0';

var step2 = '.34 0 .13 .89 .89 1 1 1 1 0';

 

Thank you.

 

 

See the Pen QQdjbJ by romaingranai (@romaingranai) on CodePen

[Carl]

Thanks for the demo.

 

Open up the JS console when you run your pen. you'll see an error:

 

WARNING: a <POLYGON> cannot accept path data. Use MorphSVGPlugin.convertToPath(elementOrSelectorText) to convert to a path before morphing.

 

So you need to something like

 

MorphSVG.convertToPath("#turingshape");

 

or since you are declaring a shapeEl variable I did:

 

var shapeEl = MorphSVGPlugin.convertToPath("#turingshape")

 

Once that fix is made you will get another error:

 

Error: <path> attribute d: Expected moveto path command ('M' or 'm')

 

This means that MorphSVG is expecting path data like this:

 

var originalStep = 'M.08 0 .55 .21 .13 1 1 1 1 0',
        step1 = 'M21,0 55,89 8,1 1,1 1,0',
        step2 = 'M.34 0 .13 .89 .89 1 1 1 1 0',
        step3 = 'M.34 0 .55 .21 .08 1 1 1 1 0';

 

I think the demo below should do what you want

 

See the Pen eVgzBO?editors=0010 by GreenSock (@GreenSock) on CodePen

 

 

 

 

 

 

 

 

[romain.gr]

Hi Carl, 

 

Again, thanks for the quick answer, however I'm still a bit confused. I'm not working with a path here but with polygon points. According to the documentation I can morph polygon points to another polygon points value (But I guess I misunderstood):

 

https://greensock.com/morphSVG#yA5pwirBtQCw7QkgdQWN

 

Points for <polyline> or <polygon> elements:

 

TweenLite.to(“#polygon”, 2, {morphSVG:"240,220 240,70 70,70 70,220"});

 

Furthermore, what is the difference between my working points (on my first demo, those values are working, even tho they aren't converted to path):

 

var originalStep = '.08 0 .55 .21 .13 1 1 1 1 0';

var step2 = '.34 0 .13 .89 .89 1 1 1 1 0';

 

and the invalid ones : 

 

var step1 = '.21 0 .55 .89 .08 1 1 1 1 0';

var step3 = '.34 0 .55 .21 .08 1 1 1 1 0';

 

Thanks for your demo, however the variables should be (I think) : 

 

var originalStep = 'M.08 0 .55 .21 .13 1 1 1 1 0',
	step1 = 'M.21 0 .55 .89 .08 1 1 1 1 0',
	step2 = 'M.34 0 .13 .89 .89 1 1 1 1 0',
	step3 = 'M.34 0 .55 .21 .08 1 1 1 1 0';

 

instead of (step1): 

 

var originalStep = 'M.08 0 .55 .21 .13 1 1 1 1 0',
	step1 = 'M21,0 55,89 8,1 1,1 1,0',
	step2 = 'M.34 0 .13 .89 .89 1 1 1 1 0',
	step3 = 'M.34 0 .55 .21 .08 1 1 1 1 0';

 

I'm working on another demo with polygon and I have no problems with my values and I didn't had to convert it to path :

 

See the Pen VQPWYm by romaingranai (@romaingranai) on CodePen

 

 

[GreenSock]

Ah, I see the problem - MorphSVGPlugin tries to be very flexible and discern if you're passing in selector text (like ".myClass" referring to an element you want to pull the path data from) or actual path data (like "M1,2 5,4..."). The Regular Expression was tripping over the fact that you started your strings with "." (it was assuming that was an indicator that it's a class selector). All you need to do is put a zero ("0") at the start, in front of the decimal. I'll adjust the Regular Expression to better sense this condition in the future, though. Sorry about any confusion. 

[romain.gr]

Hi Jack,

 

Perfect, thanks.