Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
g1eb

path data to bezier motion misaligned when entire group is animated

Recommended Posts

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

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? 

 

  • Like 3
Link to comment
Share on other sites

Ahh thank you so much, that's it! ! That's exactly what I was going for :D

 

I'll analyze the diff to see how you fixed it, thanks!

Link to comment
Share on other sites

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.

:)

 

  • Like 3
Link to comment
Share on other sites

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! :)

  • Like 1
Link to comment
Share on other sites

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

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.

:)

 

 

  • Like 4
Link to comment
Share on other sites

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

 

 

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×