path data to bezier motion misaligned when entire group is animated

[g1eb]

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.

[GreenSock]

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? 

 

[g1eb]

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!

[PointC]

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.

 

[g1eb]

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! 

[g1eb]

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.

 

 

[PointC]

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.

 

 

[g1eb]

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.