Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2022-05-16T17:08:54.227Z
Answers.LastActivityDate: 2022-05-16T17:31:44.540Z
Answers.LastEditDate: 2022-05-16T17:31:44.540Z
Answers.UserDisplayName: Clif
Body: <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>
  
Tags: <after-effects><after-effects-expressions>
Title: After Effects Trim paths offset corner position based on rectangle width and height
UserDisplayName: D34DC3N73R
ThreadText: # 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.
  [![offset path angle for each yellow corner](https://i.sstatic.net/Za4zi.png)](https://i.sstatic.net/Za4zi.png)
  
  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.
  
  [![enter image description here](https://i.sstatic.net/LS69q.png)](https://i.sstatic.net/LS69q.png)
  
  ```
  # 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)
  
  [![alternate approach](https://i.sstatic.net/VkJsi.png)](https://i.sstatic.net/VkJsi.png)
  [![any size works](https://i.sstatic.net/RL56I.png)](https://i.sstatic.net/RL56I.png)
  
  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!
  
  [![solution](https://i.sstatic.net/QcGOO.gif)](https://i.sstatic.net/QcGOO.gif)
  
  **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.
  
  
  ---
  
  