Share Posted October 17, 2018 Hi GSAP community! :) I was playing around with a logo for fun when I ran into this strange misalignment issue, it's quite apparent when you see the demo on codepen. I think it what comes down to is when the moons are animated separately everything works fine, but then if I add the rotating animation of the entire object (svg group holding all the pieces) the 'align' property of the `MorphSVGPlugin.pathDataToBezier` settings does not align correctly. When the global rotating animation is done you can see the objects 'snap' into place correctly. Is there any way to make this work? Am I missing something, maybe I should set that 'align' property to something else? Let me know what you think :) Thanks, Gleb See the Pen QZazqm by g1eb (@g1eb) on CodePen Link to comment Share on other sites More sharing options...
Share Posted October 17, 2018 I think this is what you meant to do, right? See the Pen a26c281ae59c89092ee72551f37d43b8 by GreenSock (@GreenSock) on CodePen It looks like you were creating some fromTo() tweens (which have immediateRender:true by default) and THEN running the pathDataToBezier() and aligning things in that different position. It was a timing issue. I reorganized things to run that initially, and set the xPercent/yPercent/transformOrigin on the necessary elements. Make sense? 3 Link to comment Share on other sites More sharing options...
Author Share Posted October 17, 2018 Ahh thank you so much, that's it! ! That's exactly what I was going for I'll analyze the diff to see how you fixed it, thanks! Link to comment Share on other sites More sharing options...
Share Posted October 17, 2018 Not that there's anything wrong with using the pathDataToBezier() method for what you're doing there, but I just wanted to point out the svgOrigin property in case you weren't familiar with it. For orbits like that, it's a handy feature. More info. https://greensock.com/svg-tips Happy tweening. 3 Link to comment Share on other sites More sharing options...
Author Share Posted October 17, 2018 Neat! That sounds like a better solution than keeping invisible svg 'paths' around for the motions. I'll see if I can rewrite it to use svgOrigin instead, thanks! 1 Link to comment Share on other sites More sharing options...
Author Share Posted October 18, 2018 Quick follow up on this one. I've looked into tweaking the animation to work with svgOrigin and I think I got it working now.. I was only wondering why svgOrigin had to be set to '35% 35%' instead of what I would expect - '50% 50%'? Is there some other svg size setting im supposed to set to tell it where the origin/center of the svg is? Thanks again for the help and suggestions!! See the Pen xyWgdX by g1eb (@g1eb) on CodePen Link to comment Share on other sites More sharing options...
Share Posted October 18, 2018 svgOrigin doesn't support percentages. It needs pixel based values. In your case you'd want the center of your SVG. svgOrigin: '37.5 37.5' Does that make sense? Happy tweening. 4 Link to comment Share on other sites More sharing options...
Author Share Posted October 18, 2018 Ahh makes sense! Must have missed that detail in the docs, I've updated the code now, thanks! See the Pen xyWgdX by g1eb (@g1eb) on CodePen 2 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