an expression to animate x position of a text layer

[Geert Schaap]

You could use after effects/window/ “Create Nulls From Paths” to trace the selected path.
This will give you a null object that travels from the start of the path to the end in percentages.
Parent the text layer to the null object, and link the percentage of that null to the percentage of your trim path.

There’s a default expression on the null of the traced path that will automatically loop, you can disable that by deleting the expression as a whole. (it won’t effect nothing other then the loop itself).

Hope this helps!

Good luck!

[Filip Vandueren]

This would work:


l = thisComp.layer("Bar Chart 1");
p = thisComp.layer("Bar Chart 1").content("Shape 1").content("Bar 1").path;
tr = thisComp.layer("Bar Chart 1").content("Shape 1").content("Trim Paths 1").end;

extra_margin = [0,-30]; // an extra 30 pixel margin

pos = l.toComp(p.pointOnPath(tr/100) + extra_margin);
if (hasParent) pos = parent.fromComp(pos); // take care of parenting

pos


[Andrei Popa]

Hey Filip, that’s a very nice expression.
Just curious, do you think that could be made to work with multiple shapes and only a trim paths that completes them individually?

Andrei
My Envato portfolio.

[Filip Vandueren]

You mean as a bar graph ?
If I understand correctly, i this scenario you would have bars that have actually different lengths, revealed by just one trim path on the whole group ?

In theory yes… Though when the paths are curved, it’s harder to be precise: you first have to run a loop to “measure” the length of each path in pixels.

[Andrei Popa]

I hoped for an easier solution for some curved paths.

Andrei
My Envato portfolio.

[Ahmad Hesam]

that worked like a charm and I appreciate it.though, can you give me the definition of this line of code. sorry I’m a noob at coding.

pos = l.toComp(p.pointOnPath(tr/100) + extra_margin);

[Filip Vandueren]

Sure, it does use a few different of methods:

pos = l.toComp(p.pointOnPath(tr/100) + extra_margin);

p was a reference to the shape of the line you drew (path)
tr was a reference to how far the End-parameter of the trim Paths Effect was set.

p.pointOnPath() = is a method that returns the pixel coordinates of a point along a given path (p).
At 0 it’ll give the position of the vertex, at 1.0 the position of the last vertex (or the first again, if the path is closed), and in between it’ll give points along the path.
It is very close to what “Trim Paths” does visually, but gives us coordinates.

Trim Path however goes from 0-100, so we divide by 100 to get values between 0 an 1.0

p.pointOnPath(tr/100) + extra_margin -> this would give us the pixel coordinates of where the line stops + some extra pixels higher (extra margin).

However: these coordinates are relative to the layer the path is on, we cannot just use this coordinate for another layer ‘s position and suppose they are the same: the layer where the coordinates comes from could be sacled, rotated, parented,… for every layer an ‘internal’ coordinate like [100,100] can mean a totally different pixel on screen.

layer.toComp([x,y]) fixes this: it is a “layer space transform method” that gives us the actual position in the comp of a position ‘inside’ of a layer.

There might be other factors of why that position would still note work as the precise position for another layer (if it’s parented form example), but that is fixed in the next line with a fromComp(), which does the inverse of toComp()

[Ahmad Hesam]

“PointOnPath” and “ToComp”.
thanks, I’m in your debt.