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