How to attach shape to a path and make an arrowhead

All things .jsx

Moderator: Paul Tuersley

Post Reply
FFORM
Posts: 2
Joined: September 20th, 2019, 11:29 am

Just sorted this out and wanted to share in case someone is looking for this and doesn't want to spend $30.
Comp_2.gif
Comp_2.gif (45.13 KiB) Viewed 21284 times
1. Create a shape, I made a circle
2. Add a Trim Paths to put the arrowhead at the end (you don't need this here and could set the location to anywhere along the path)
3. Add polystar to your shape layer, set points to 3 (for a triangle arrowhead)
4. On your polystar set position to

Code: Select all

var p = content("Group 1").content("Path 1").path;
var pnts = p.pointOnPath(thisComp.layer("Shape Layer 1").content("Group 1").content("Trim Paths 1").end/100,time);
pnts
Obviously, replace those names with whatever you have. Eg, Shape Layer 1, Group 1, Trim Paths 1, etc.
5. On polystar set rotation to

Code: Select all

var p = content("Group 1").content("Path 1").path;
var tans = p.tangentOnPath(thisComp.layer("Shape Layer 1").content("Group 1").content("Trim Paths 1").end/100,time);
radiansToDegrees(Math.atan2(tans[1],tans[0])) + 90
Now you can animate your trim path end and the triangle will follow the end of the path, automatically orienting itself to the shape.
Post Reply