Skip to main content
Inspiring
December 6, 2021
Answered

ShapeLayer rectangle size and trim path start, end, offset, expression to adjust with rectangle siz

  • December 6, 2021
  • 3 replies
  • 8152 views

Hi there,

please check image attached.

i have simple rectangle with stroke and trim path. When i adjust size of rectangle width or height then the start, end, offset of trim path shud adjust automatically to new rectangle size to retain original shape.

Please help.

This topic has been closed for replies.
Correct answer manjunath MK

Hi dan, 

I understtod what ur saying. Attached is the exact trim shape to retain, even if size [x,y] of rectangle changes.

No need to touch offset.I ll make an edit to this question. just start and end of trim path


@Rick Gerard @Mylenium to keep things realistic, i have attached an exact shape to work for. Also, given the same to @Dan Ebberts as well. Thank you all, Math wizards.

3 replies

Mylenium
Legend
December 9, 2021

Yeah, you probably need to correlate the absolute path length to the values generated by the End and Start percentages somehow to get some real pinning. Should not be too difficult. Just another linear() function perhaps. The math is all there already...

 

Mylenium

Inspiring
December 9, 2021

For me this math stuff is difficult, i ll get high fever Lol!

Mylenium
Legend
December 8, 2021

Here's something that works:

 

 

rectSize = content("Rectangle 1").content("Rectangle Path 1").size;
rectRound=content("Rectangle 1").content("Rectangle Path 1").roundness;
rectStart=content("Rectangle 1").content("Trim Paths 1").start;
rectEnd=content("Rectangle 1").content("Trim Paths 1").end;

rectLen= rectSize[0] * 2 + rectSize[1] * 2+Math.PI*rectRound*2;

realStart=linear(rectStart,0,100,0,rectLen);
realEnd=linear(rectEnd,100,0,rectLen,0);

realDiff=realEnd-realStart;

value+rectLen/realDiff

 

 

There's still some slight creep due to precision issues the larger the rectangle and the rounded corner radius gets, but this definitely should do the trick.

 

Mylenium

Inspiring
December 9, 2021

Is  this code tested. its not working for me bro.attached is a screen shot.

also i have attached my version of code which works for trim end with known issues.

it seems like not working when end slider is at 1750.(right edge)

At slider 1585, when end goes to bottom edge, there size x maintains distance in relation to bottom left point, but y doesn't work.

like wise in differrent locations it behaves differently but it works perfect at slider -183.

Plz check if it helps and help me with custom start,end with rectangle size.

 

 

 

 

 

 

 

Community Expert
December 8, 2021

All you have to do is divide the size of the rectangle by 360 and add that value to the offset. The expression looks like this:

 

 

 

var rectSize = content("Rectangle 1").content("Rectangle Path 1).size;
ofst = 360 / (rectSize[0] * 2 + rectSize[1] * 2);
value + ofst

 

 

 

Then set your roundness, start and end values, and adjust the offset to position the gap where you want it. The simple ratio generated by the expression on Offset keeps things lined up. That is by far the simplest solution.

 

Hint: Holding down the Cmnd/Ctrl key when dragging the offset value will divide the value by 10 and make fine-tuning the position of the gap easier. 

 

EDIT: Come to think of it, the roundness throws a kink in the expression. As it is, the expression keeps the gap the same size and allows you to position it anywhere. You will have to compensate for the roundness and make sure that it is limited to half the maximum width of the rectangle. I'll have to open up After Effects and fiddle with the expression for a while. I'll bet Dan Ebberts has the solution.

 

Inspiring
December 8, 2021

Hi rick,

Thank u for ur reply.

 

I tried below expression and i found its not working wihtout roundness as well.Attached is screen shot for ur reference.

var rectSize = content("Rectangle 1").content("Rectangle Path 1).size;
ofst = 360 / (rectSize[0] * 2 + rectSize[1] * 2);
value + ofst

Trim paths is like nighmare for me while standardizing AE templates with expressions. Hope it ll get sorted.

Thank you