MorphSVGPlugin weird behavior

[isaoBushi]

Hi there, I've started experimenting with this plugin but at the moment I can't get it run properly

<svg>

<rect id="end-shape" width="100" height="100" fill="red"/>

<path id="start-shape" d="M739.24,486.44a3,3,0,0,0-3.27,2.95.57.57,0,0,0,.57.57.56.56,0,0,0,.56-.57,1.85,1.85,0,0,1,2-1.83,1.92,1.92,0,0,1,1.66,1.94V502a.69.69,0,0,1-.12.38,7.19,7.19,0,0,0-14-1.23,3,3,0,0,0-4.28,0,7.19,7.19,0,0,0-14,1.23.69.69,0,0,1-.12-.38V489.5a1.92,1.92,0,0,1,1.66-1.94,1.85,1.85,0,0,1,2,1.83.56.56,0,0,0,.56.57.57.57,0,0,0,.57-.57,3,3,0,0,0-3.27-2.95,3.05,3.05,0,0,0-2.68,3.06V502a1.79,1.79,0,0,0,1.22,1.69,7.19,7.19,0,0,0,14.36-.48,1.84,1.84,0,0,1,3.68,0,7.19,7.19,0,0,0,14.36.48,1.79,1.79,0,0,0,1.22-1.69V489.5A3.05,3.05,0,0,0,739.24,486.44Zm-23.77,22.85a6.06,6.06,0,1,1,6.06-6.05A6.05,6.05,0,0,1,715.47,509.29Zm18.06,0a6.06,6.06,0,1,1,6.05-6.05A6.06,6.06,0,0,1,733.53,509.29Z" transform="translate(-676.01 -481.98)"/>

</svg>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>

<script src="./MorphSVGPlugin.min.js"></script>

 

 

const tl = gsap.timeline({ yoyo: true, repeat: 1 })

const rect = MorphSVGPlugin.convertToPath("#end-shape")


tl.to(rect, 12, { morphSVG:"#start-shape" })

 

I'm expecting the rectangle to morph into the glasses , while what I see is the rectangle sliding away shrinking

 

what am I doing wrong ?

 

Cheers

[GreenSock]

The main problem is that your artwork isn't set up properly - notice that your <path> element has a transform applied of translate(-676.01 -481.98). The raw artwork coordinates (which are what MorphSVGPlugin uses) are way off to the right and down, but that transform is shifting it up by 481.98 pixels and to the left by 678.01 pixels. So when the morph occurs, it's honoring the coordinates baked into the <path> and that's why it's moving down and to the right. If you set overflow: visible on your <svg> element, you'll see it end up fully morphed down and to the right. 

 

You can either correct the artwork so that it doesn't use a transform like that, or you could compensate for the transform in the animation by adding x and y accordingly as I show here: 

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

 

Does that help? 

[isaoBushi]

Thank you Jack, that makes sense