Jump to content
GreenSock

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

MotionPath: object not aligned with path

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: https://codepen.io/strangler/pen/bGdEVJV

 

Can you guys help me figure out this one? 

 

Thank you in advance,

Cheers!

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

Thank you @ZachSaucier, very appreciated.

 

One more question: do I have to set "align: "#path" inside motionPath all the time?

 

Cheers!

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

Amazing! Thanks mate! 😃

Share this post


Link to post
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

Share this post


Link to post
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.

 

See the Pen bGdEVJV by strangler (@strangler) on CodePen

 

My question is, why does it happen? Doesn't it should automatically put the object on the right path?

 

Thank you,

Cheers 

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Amazing. Thanks for your great support.

 

Cheers!

Share this post


Link to post
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.

×