Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Jake Wade

Arrow head Autorotation

Recommended Posts

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.





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

Link to comment
Share on other sites

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.

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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


Link to comment
Share on other sites

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. 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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


Link to comment
Share on other sites

1 minute ago, Jake Wade said:

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

Correct :) 

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