Animate arrows along path

[emilyyoung]

Hey all,

 

I have a query regarding animating along an SVG path.

 

I have been able to get the circles animated as per the codepen demo but due to the path going in different directions, i'm struggling to figure out what I do with the arrows.

 

Basically, the arrows are down, left and right and I was wondering if there was a way that I could change the direction of these arrows depending on where they are along the path? I just think the animation will look odd when the arrow is animating downwards but is facing right for example.

 

The codepen demo is as far as I have got in terms of animating this.

 

Thanks

See the Pen BLmAbd by livingincircuits (@livingincircuits) on CodePen

[Jonathan]

Hello emilyyoung, and Welcome to the GreenSock forum!

 

When i look at your codepen i see each arrow facing toward the direction the circle is animating in. I'm a little confused by your question. Are you wanting to just know what to do with the arrows or how to rotate them?

 

Any additional info will be greatly appreciated. Thanks

[emilyyoung]

Hi,

 

Sorry I wasn't very clear.

 

I have yet to do anything with the arrows as I am still trying to understand how I would approach the animation.

 

Each white arrow should reside inside the grey circle and follow the circles along the path.

 

Here is an image of what the circles and arrows are supposed to look like:- 

 

 

The issue I am having is how would I go about changing the position of the arrow depending on where it is along the path? For example, the first circle and arrow is facing downwards but this would look odd once it changes direction and goes left, the circle will still face downward.

 

I've spent a good while looking into this and I am not certain it is possible or if I am making this way more complicated than it needs to be!

 

Thanks

[Jonathan]

Ok i see now.. since you are using the BezierPlugin you can use the special property autoRotate:true

 

autoRotate rotates the element automatically towards the direction of the path

 

BezierPlugin Docs: http://greensock.com/docs/#/HTML5/GSAP/Plugins/BezierPlugin/

• autoRotate : Boolean, Number, or Array (default:false) - to automatically rotate the target according to its position on the Bezier path, you can use the autoRotate feature. If your Bezier is affecting the "x" and "y" (or "left" and "top") properties of your target and you don't need to offset the rotation by a certain amount more than normal, then you can simply setautoRotate:true. Or if you want to offset the rotation by a certain amount (in degrees), you can define a number like autoRotate:90 (adding 90 degrees in this example). Or for more advanced controls, you can define autoRotate as an array. In order to adjust a rotation property accurately, the plugin needs 5 pieces of information:
  1. Position property 1 (typically "x" or "left")
  2. Position property 2 (typically "y" or "top")
  3. Rotational property (typically "rotation")
  4. Number of degrees (or radians) to add to the new rotation (optional - makes it easy to orient your target properly)
  5. Boolean value indicating whether or not the rotational property should be defined in radians rather than degrees (default is false which results in degrees)

  The autoRotate property should be an Array containing these values, like ["x","y","rotation",90*Math.PI/180,true]. And if you need to affect multiple rotational properties (like in 3D tweens where the Bezier is going through x,y,z points which could affect rotationX, rotationY, and rotationZ), you can use an array of arrays, like["x","y","rotationZ",0,false], ["z","x","rotationY",0,false], ["z","y","rotationX",0,false].

var tl = new TimelineMax(),
    arrowLine       = MorphSVGPlugin.pathDataToBezier('#arrow-line'),
    arrow           = $('.arrow');

tl.staggerFrom(arrow, 4.5, {
    bezier: {
        values: arrowLine,
        type: 'cubic',
        autoRotate: true // auto rotates the element to the direction of the path direction        
    },
    ease: Linear.easeNone,
    repeat: -1
}, 1);

Once you add your arrow inside your circle you will see the arrow auto rotates along the path.

 

You can see in this example that the ghost is animating along a Bezier path and automatically faces the direction of the path

 

See the Pen LuIJj by GreenSock (@GreenSock) on CodePen

 

[emilyyoung]

Oh my gosh I think you have saved me hours of head ache. Completely missed the autoRotate property.

 

Managed to get it working how I expect in 5 minutes! Thank you so much for pointing me in the right direction