Jump to content
Search Community

path data to bezier motion misaligned when entire group is animated

g1eb test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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





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

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

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.
  • Create New...