Jump to content
Search Community

MotionPath: object not aligned with path

CCRR test
Moderator Tag

Recommended Posts

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

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? 

  • Like 2
Link to comment
Share on other sites

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

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

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. 👍

  • Like 3
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...