<p>In order to align the lines to each corner, I was able to do this:</p>
<p><strong>Bottom left corner:</strong></p>
<ul>
<li>No offset</li>
<li>Set trim start to 50%</li>
<li>Set trim end to 50%</li>
<li>Set expression on trim end to be 100 minus the trim start or something like <code>100 - content(&quot;Rectangle 1&quot;).content(&quot;Trim Paths 1&quot;).start</code></li>
<li>Now if you change the value of the trim start, it should stay equidistant with the trim end.</li>
</ul>
<p>This first corner can be used as a starting point for all of the other corners and we should only have to update the <code>offset</code> to get them to align correctly to each corner.</p>
<p><strong>Top right corner</strong></p>
<ul>
<li>Set offset to 180 degrees</li>
</ul>
<p><strong>Bottom right corner</strong></p>
<ul>
<li>Set expression for offset to be:</li>
</ul>
<pre><code>// If needed, change your width and height variables to whatever values you 
// are using to drive your dimensions.
width = content(&quot;Rectangle 1&quot;).content(&quot;Rectangle Path 1&quot;).size[0];
height = content(&quot;Rectangle 1&quot;).content(&quot;Rectangle Path 1&quot;).size[1]
perimeter = 2 * width + 2 * height;
perc = width / perimeter;

-perc * 360
</code></pre>
<p><strong>Top left corner</strong></p>
<ul>
<li>Pickwhip the offset of the bottom right corner and add <code>180</code>.</li>
</ul>
<p>Then you should be able to hook up each of the trim path's start positions to a 'slider control' effect to have them all animate together.</p>

CC BY-SA 4.0
2022-05-16T17:08:54.227Z
2022-05-16T17:31:44.540Z
2022-05-16T17:31:44.540Z
Clif
<p>I think it would be easier to share an image to show what I'm trying to accomplish.
<a href="https://i.sstatic.net/Za4zi.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/Za4zi.png" alt="offset path angle for each yellow corner" /></a></p>
<p>This will be a mogrt so the actual rectangle size / aspect ratio is determined by variable text size.</p>
<p>But, I think I should still be able to figure out offset angle so the trimmed paths will always be centered on the corners.</p>
<p><strong>Edit:</strong> Getting a bit further but still not there. This <em>should</em> make the yellow stroke start directly in the lower right corner, but it doesn't.</p>
<p><a href="https://i.sstatic.net/LS69q.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/LS69q.png" alt="enter image description here" /></a></p>
<pre><code># text layer determines width and height
txt=thisComp.layer(&quot;quote&quot;).sourceRectAtTime();

# padding adding to width and height
p=thisComp.layer(&quot;controls&quot;).effect(&quot;box padding&quot;)(&quot;Slider&quot;);
h=txt.height+p;
w=txt.width+p;

# angle from upper right corner to lower right corner (yay trigonometry)
x=radiansToDegrees(Math.atan(h/w))*2;
[x]
</code></pre>
<p>I still haven't figured out how I'm going to account for the length of the line yet (in degrees).</p>
<p><strong>Edit 2:</strong> Decided to take a different approach and use a mask with 2 rectangle shapes (controlled with a second slider)</p>
<p><a href="https://i.sstatic.net/VkJsi.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/VkJsi.png" alt="alternate approach" /></a>
<a href="https://i.sstatic.net/RL56I.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/RL56I.png" alt="any size works" /></a></p>
<p>The yellow stroke shape uses the dual rectangle shape layer as a track matte and I'm using these two expressions to determine the width/height of the rectangles.</p>
<pre><code>txt=thisComp.layer(&quot;quote&quot;).sourceRectAtTime();
h=txt.height;
w=txt.width;
p=thisComp.layer(&quot;controls&quot;).effect(&quot;box padding&quot;)(&quot;Slider&quot;);
sw=thisComp.layer(&quot;controls&quot;).effect(&quot;stroke length&quot;)(&quot;Slider&quot;)
x=w-sw;
y=h+p*2;
[x,y]

txt=thisComp.layer(&quot;quote&quot;).sourceRectAtTime();
h=txt.height;
w=txt.width;
p=thisComp.layer(&quot;controls&quot;).effect(&quot;box padding&quot;)(&quot;Slider&quot;);
sw=thisComp.layer(&quot;controls&quot;).effect(&quot;stroke length&quot;)(&quot;Slider&quot;)
x=w+p*2;
y=h-sw;
[x,y]
</code></pre>
<p>I won't be able to animate the way I had planned, but I should still be able to come up with a cool look by animating the track matte. I'm leaving this question open because I would love to know why my first solution wasn't correct.</p>
<p><strong>Edit3:</strong> Thanks for the answer Clif!</p>
<p><a href="https://i.sstatic.net/QcGOO.gif" rel="nofollow noreferrer"><img src="https://i.sstatic.net/QcGOO.gif" alt="solution" /></a></p>

<after-effects><after-effects-expressions>
After Effects Trim paths offset corner position based on rectangle width and height
D34DC3N73R
# After Effects Trim paths offset corner position based on rectangle width and height

(Asked by: username_0 on 2022-05-14)

I think it would be easier to share an image to show what I'm trying to accomplish.

This will be a mogrt so the actual rectangle size / aspect ratio is determined by variable text size.
But, I think I should still be able to figure out offset angle so the trimmed paths will always be centered on the corners.
Edit: Getting a bit further but still not there. This should make the yellow stroke start directly in the lower right corner, but it doesn't.

# text layer determines width and height
txt=thisComp.layer("quote").sourceRectAtTime();

# padding adding to width and height
p=thisComp.layer("controls").effect("box padding")("Slider");
h=txt.height+p;
w=txt.width+p;

# angle from upper right corner to lower right corner (yay trigonometry)
x=radiansToDegrees(Math.atan(h/w))*2;
[x]

I still haven't figured out how I'm going to account for the length of the line yet (in degrees).
Edit 2: Decided to take a different approach and use a mask with 2 rectangle shapes (controlled with a second slider)


The yellow stroke shape uses the dual rectangle shape layer as a track matte and I'm using these two expressions to determine the width/height of the rectangles.
txt=thisComp.layer("quote").sourceRectAtTime();
h=txt.height;
w=txt.width;
p=thisComp.layer("controls").effect("box padding")("Slider");
sw=thisComp.layer("controls").effect("stroke length")("Slider")
x=w-sw;
y=h+p*2;
[x,y]

txt=thisComp.layer("quote").sourceRectAtTime();
h=txt.height;
w=txt.width;
p=thisComp.layer("controls").effect("box padding")("Slider");
sw=thisComp.layer("controls").effect("stroke length")("Slider")
x=w+p*2;
y=h-sw;
[x,y]

I won't be able to animate the way I had planned, but I should still be able to come up with a cool look by animating the track matte. I'm leaving this question open because I would love to know why my first solution wasn't correct.
Edit3: Thanks for the answer username_1!

**Tags:** after-effects, after-effects-expressions


---

## 1 answers

### Answer by username_1 on 2022-05-16. Score: 2 | Accepted answer

In order to align the lines to each corner, I was able to do this:
Bottom left corner:

No offset
Set trim start to 50%
Set trim end to 50%
Set expression on trim end to be 100 minus the trim start or something like 100 - content("Rectangle 1").content("Trim Paths 1").start
Now if you change the value of the trim start, it should stay equidistant with the trim end.

This first corner can be used as a starting point for all of the other corners and we should only have to update the offset to get them to align correctly to each corner.
Top right corner

Set offset to 180 degrees

Bottom right corner

Set expression for offset to be:

// If needed, change your width and height variables to whatever values you 
// are using to drive your dimensions.
width = content("Rectangle 1").content("Rectangle Path 1").size[0];
height = content("Rectangle 1").content("Rectangle Path 1").size[1]
perimeter = 2 * width + 2 * height;
perc = width / perimeter;

-perc * 360

Top left corner

Pickwhip the offset of the bottom right corner and add 180.

Then you should be able to hook up each of the trim path's start positions to a 'slider control' effect to have them all animate together.


---

