isaoBushi Posted September 8, 2020 Share Posted September 8, 2020 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 Link to comment Share on other sites More sharing options...
GreenSock Posted September 8, 2020 Share Posted September 8, 2020 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? 2 Link to comment Share on other sites More sharing options...
isaoBushi Posted September 8, 2020 Author Share Posted September 8, 2020 Thank you Jack, that makes sense Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now