Arrow head Autorotation

[Jake Wade]

Hi All, & Thanks in advance for any help.

 

I have a selection of arrow heads I want to move along separate paths... I've followed some existing Topics here to get me most of the way, but am struggling with inconsistency between the different shapes.

 

Some of the arrow heads are drawing in no problem (all the straight ones, that makes sense), but others do while similar ones don't - see #i-line_5. That works well, whereas #i-line_3 doesn't.

 

It seems to be partly to do with the arrow head origin-position, and partly autorotate, but cannot get a fix whilst I change these. 
I also suspected the origin of each arrow-head may need changing (eg, which point comes first in the Path parameter), but have struggled to update them / make any change to the outcome.

 

Thanks

Jake.

 

See the Pen PoorMaR?editors=0010 by mudjakewade (@mudjakewade) on CodePen

[ZachSaucier]

Hey Jake and welcome.

 

This is mainly due to the orientation of how your triangles (heads) are oriented at the start. GSAP assumes that the starting orientation is the "normal" one, so when it autorotates it aligns it along the path based on the initial state. Since your triangles start at different angles, different alignments along the path occur. 

 

I would recommend using the same alignment of the triangles so that you can just use a single tween and not try and worry about setting the correct rotation and such yourself. You can do that easily by just replacing the triangle paths with the same triangle path. You can also set a numerical value for autorotate if you need to change the "normal" rotation like I did below. An alternatively approach would be to manually set the correct rotation for each head.

See the Pen jOEVLvp?editors=1000 by GreenSock (@GreenSock) on CodePen

 

The only current downside is that the triangles all start at the same spot (before JS kicks in). You could change if you need to.

[Jake Wade]

Hi Zach,

 

That is amazing, thank you so much.
 

Your change makes sense (and is easier than my attempts!), apart from the -90 deg autoRotate part - I don't understand how they are all set to the same -90deg, all start 'facing down', but have different starting orientations (ie the path they each follow). 

 

Changing this new code, to try and see how it works, again partly makes sense (all triangles being the same place, no problem), but changing the value of -90 doesn't make this clearer to me! 

 

Any other explanation as to how this works, or how you 'fixed' my problem, would be really appreciated and useful.

 

(The triangles starting in the same spot is fine - I'll either move them off screen / fade them in at some point along the timeline).

 

Thank you again

Jake.

[ZachSaucier]

As I said, when you are using a motion path GSAP assumes that the starting orientation of the elements is the "correct"/upright orientation of the elements. As you can see in the demo below, your "arrow" is arguably oriented pointing downwards by default, but motionPath assumes that the orientation should go to the right. That means we can apply a rotation of -90 (or 270, etc.) to make it "point" in the "right" direction. We can use the same value for each because I copied the same triangle to use for each. 

See the Pen LYEbOZr?editors=0010 by GreenSock (@GreenSock) on CodePen

 

GSAP then takes the element and rotates it according to the path's curves. 

 

Maybe @GreenSock can give better language to this situation. 

[Jake Wade]

Hi Zach

Thank you for the reply.
 

I think I was 'missing' the Left-to-Right part of MotionPath - now  you've explained that, it makes more sense.
(For anyone else - if the arrows point Right at the start, & autoRotate is True, it works just the same).

 

I'll have a look at the other graphics, but am confident I should be able to get them working now from your help.

 

Thanks again

Jake.

[ZachSaucier]

1 minute ago, Jake Wade said:

if the arrows point Right at the start, & autoRotate is True, it works just the same

Correct