CCRR Posted February 18, 2020 Share Posted February 18, 2020 Hi everybody! I'm finding some trouble when trying to align an object and a path. The object is always apart from the path and I don't understand why. I've tried several commands, but neither with the most basic code I can get the desired result. Only with the "align: "#path" command I can almost get the desired result: Can you guys help me figure out this one? Thank you in advance, Cheers! See the Pen bGdEVJV by strangler (@strangler) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 18, 2020 Share Posted February 18, 2020 Hey CCRR and welcome to the GreenSock forums! You should set the transform origin and x and y offset before you animate. This is because GSAP is attempting to animate to those values instead of using them from the start: See the Pen oNXLwBB by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
CCRR Posted February 18, 2020 Author Share Posted February 18, 2020 Thank you @ZachSaucier, very appreciated. One more question: do I have to set "align: "#path" inside motionPath all the time? Cheers! Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 18, 2020 Share Posted February 18, 2020 2 hours ago, CCRR said: do I have to set "align: "#path" inside motionPath all the time? If you want to align it to the path, yes You can align it to other elements if you'd like. Leaving it out aligns it to the path's coordinates by default. Link to comment Share on other sites More sharing options...
CCRR Posted February 18, 2020 Author Share Posted February 18, 2020 Amazing! Thanks mate! 😃 Link to comment Share on other sites More sharing options...
GreenSock Posted February 18, 2020 Share Posted February 18, 2020 2 hours ago, ZachSaucier said: You can align it to other elements if you'd like. Leaving it out aligns it to its current position by default. Just to be clear, leaving it out doesn't really align it to its current position by default (that's what align: "self" would do). If you don't define any "align", then it uses the coordinates from the <path> literally. Like if the path data starts with "M100,200..." it would make the element's x jump to 100 and y jump to 200 initially and go from there. Does that clear things up? 2 Link to comment Share on other sites More sharing options...
CCRR Posted February 18, 2020 Author Share Posted February 18, 2020 Definitely! The thing is - and this is confusing me - when I draw my svg I do so with the object overlapping the beginning of the path. But when I put it in HTML and try to animate it, the object slips away. My question is, why does it happen? Doesn't it should automatically put the object on the right path? Thank you, Cheers Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 18, 2020 Share Posted February 18, 2020 28 minutes ago, CCRR said: My question is, why does it happen? Doesn't it should automatically put the object on the right path? As Jack pointed out above, I misspoke when I said that by default it aligns to its starting position. To have it align to the position of the element you should use align: "self". However, in your demo if you add that you will notice that it's not aligned perfectly because of the xPercent and yPercent of -50. You could use a new feature called alignOrigin (yet to be released - it will be included in the next release) instead to remedy that: See the Pen jOPrYeV?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted February 18, 2020 Share Posted February 18, 2020 34 minutes ago, CCRR said: My question is, why does it happen? Doesn't it should automatically put the object on the right path? Yep, @ZachSaucier explained it correctly and just for clarity I want you to notice that your path's "d" attribute starts with "M208.44,376.35..." which means the path itself is drawn starting at an x coordinate of 208.44 and a y coordinate of 376.35. By default, MotionPathPlugin will interpret that as literal x/y values to apply to the target of your tween, meaning it will set its "x" transform to 208.44 and "y" transform to 376.35 - that's why you saw it jump down and over initially and animate from there. It's doing exactly what it's supposed to do. If your airplane was initially placed at exactly 0,0 (the origin of your SVG), you'd see it jump right to the path because the coordinates would match. But currently you've got the airplane initially set up on top of the path, thus when it applies the x/y transforms it's moving from there. Simply aligning it to the path should give you exactly what you want, right? In other words, align: "#path" And yes, this will be even easier in the GSAP 3.2 release because you can define an alignOrigin. 👍 3 Link to comment Share on other sites More sharing options...
CCRR Posted February 18, 2020 Author Share Posted February 18, 2020 Amazing. Thanks for your great support. Cheers! 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