sourceRectAtTime won't fit the text source layer size

[sebastianz95798621]

Hi everybody,

I'm starting with expressions and I'm currently learning how to the sourceRectAtTime but it won't fit.

It makes the shape layer a lot wider than the text layer:

This is the code that I'm using:

var s = thisComp.layer("tutorial");

var w = s.sourceRectAtTime().width;

var h = s.sourceRectAtTime().height;

[w,h];

I'm on AE 2019. I don't know if it has something to do with it.

Thanks for all your help,

Sebastian

[Rick Gerard]

For that expression to work and keep the text aligned you need to throw more properties.

sourceRectAtTime().top will give you the top of the rectangle offset by the baseline (anchor point). Using sourceRectAtTimeI().left will give you the left edge of the text layer based on the anchor point. Combine these both with width and height and you can be sure that your rectangle will line up with the text layer.  I also always use index - 1 instead of "Layer Name" for this kind of expression because the shape layer is, or should always be, one layer below the text layer.

Your expression will return the size of the text layer but it will not take into account the opacity of the text or the position of any character not in the frame so the use of text animators will require a lot of extra work. It works for me for any text layer that does not have something else going on like empty or transparent characters or a text animator. To figure out what is going on with your text layer select both the text and shape layer and press 'uu' to reveal all modified properties. You should be able to figure it out.

To compensate for left, right, and center justification and keep the shape layer rectangle lined up with the text your expression should look like this:

src=thisComp.layer(index - 1);
ref = sRc.sourceRectAtTime();
refScale = sRc.scale * .01;
x = ref.width;
y = ref.height;
t = ref.top;
l = ref.left;

[x * refScale[0], y * refScale[1]]

I have also referenced the scale of the text layer and made adjustments for that.

To snap the rectangle into the correct position you also need an expression for Rectangle 1/Position. That expression is almost identical but it divides the height and width by 2, then you invert the height by adding a minus sign before the variable.

Tie the Shape Layer Transform/Position to the text layer and you have a rectangle that will always snap to the same position as the text layer. All you have to do to clean it up is add a stroke that is the same color and adjust the stroke offset or add some padding to height and width with a slider. You could also throw in a multiplier for roundness to grow the rectangle enough to accommodate rounded corners. 

When you are done, save this shape layer as an animation preset and you'll be able to just double click it in the Effects and Presets/Custom Presets panel and add a shape layer to any comp, then drag it below the text layer and everything will work every time.

Here's what one of my presets looks like without showing all of the expressions. You should be able to figure them out on your own.