[Alexander Manzano]

Thank you for the links. I don’t think expressions are that difficult to understand because I am familiar with coding already. I’m just new to animating. Anyway, after a couple of hours I finally figured it out sorta.

First thing I did was to define a path for a circle. So in the circle’s position property I created an expression to follow a parametric equation.

x(t) = b*time;
y(t) = a*Math.cos(time) + c;
//a and b are just numbers that scale the functions
//c moves the curve downward in the composition
[x,y];

Now, instead of using an arrow (since it’s purely cosmetic), I created a rectangle shape. I moved the anchor point to the top and middle of the rectangle and re-positioned it to the origin (0,0) or in other words to the top left of the composition. Since the anchor point has to remain at the origin, the arrow itself must rotate and scale simultaneously, so that the tip of the arrow follows the circle’s parametric path.

To figure out how the rectangle rotates, you have to use some trigonometry. Since x(t) and y(t) can be viewed as a right triangle where the length of the rectangle is the hypotenuse, you can find the angle at any given moment of time by using the inverse tangent function. Therefore, you just have to set this value to the rotation property of the rectangle.

rad = Math.atan(thisComp.layer("circle").transform.position[1] / thisComp.layer("circle").transform.position[0]);
x = radiansToDegrees(rad) + 270;
//Math.atan() gives value in radians so we have to convert to degrees
//the 270 just flips the orientation of the triangle to correctly map the circle
[x];

Scaling the rectangle was probably the part that took me awhile to figure out. That was simply because if you change the size values of the rectangle, then its size changes relative to the center of the rectangle. However, I found that the scale property scales the rectangle with respect to the anchor point; therefore the scale property must be used to make animation work properly. The problem here is the values dimensions; the size property is in terms of pixels while the scale property is in terms of percentages. So first thing to do is to find the length of the rectangle at any given moment of time. As I said before, you can view parametric equations as a triangle. Hence, the length of the rectangle can be found by using the Pythagorean theorem and the value will be in pixels. Next we just have to convert this into a percentage by taking the ratio of the calculated length divide by the original length and finally multiply by 100. Then just take this value and set it to the scale property of the rectangle.

x = 100;
length = Math.sqrt( Math.pow(thisComp.layer("circle").transform.position[0], 2) + Math.pow(thisComp.layer("circle").transform.position[1], 2) );
y = (length/content("rectangle").content("rectangle").size[1]) * 100;
//x remains 100 because we are only scaling the length not the width
[x,y];

Here is a video link to see the final result. (I don’t know any other way to show it) The reverse of the path is just some video editing to make it look nicer. Video

However, the only problem now is to figure out how to make this more generalized. Such as any parametric equation at any location in the composition as well as any arrow(s) at any given location(s). That’s probably what I am going to try to wrap my head around for the next couple of days. By the way the above stuff is dependent on location, so if the anchor point was not at the origin then this will not work.