MOGRT responsive textbox

I took some time this evening to throw together an AEP file that you can look at. As long as the Anchor Point is in the center of your background layer, and the text is center justified, these expressions will work for the Title Layer:

// Title Position
l3 = thisComp.layer("Background");
l2size = thisComp.layer(index + 1).sourceRectAtTime();
bgP = l3.position;
bgS = l3.sourceRectAtTime();
pad = 30; // caption padding
tLsize = sourceRectAtTime();
ttlY = tLsize.height + l2size.height + pad;
[bgP[0], bgP[1] - ttlY/2 - tLsize.top]


// Title Scale
tlW = sourceRectAtTime().width;
subW = thisComp.layer(index + 1).sourceRectAtTime().width;
txtW = Math.max(tlW, subW);
bgW = thisComp.layer("Background").sourceRectAtTime().width * .8;
ratio = bgW/tlW;
if (tlW < bgW){
	x = 100;
}
else{
	x = 100 * ratio;
}
[x, 100]

I have set the max text width to 80% of the background layer size.

These are the expressions for the Caption Layer:

// Caption Position
l1 = thisComp.layer(index - 1);
box = l1.sourceRectAtTime();
y = box.top + box.height;
pad = 30; // percent of padding
tLyr = sourceRectAtTime();
tlTop = tLyr.top - pad;
p = l1.position;
p + [0, y - tlTop]

// Caption Scale
tlW = sourceRectAtTime().width;
subW = thisComp.layer(index - 1).sourceRectAtTime().width;
txtW = Math.max(tlW, subW);
bgW = thisComp.layer("Background").sourceRectAtTime().width * .8;
ratio = bgW/tlW;
if (tlW < bgW){
	x = 100;
}
else{
	x = 100 * ratio;
}
[x, 100]

As a text layer gets bigger, it starts to scale down when it approaches 80% of the width of the Background. The position of the Background layer drives the position of the Title layer. There is a padding value that offsets the Tltle layer from the Caption layer. The position of the Caption layer is driven by the position of the Title layer. 

I hope this points you in the right direction. I'm only scaling the text in X, but you could also scale in Y if you want by driving both values by the result of the if statements. 

This is the basic workflow that I would follow and the expressions. 

The idea:

Tie the position of the second text layer to the position of the top text layer and offset it by the height of the second text layer. It would also be a good idea to compensate for paragraph justification and baseline shift in both text layers. Padding as a percentage of the height of the top text layer should also be added to the formula. Here is the expression that accomplishes that task:

mstr = thisComp.layer(index - 1);
p = mstr.position;
b = mstr.sourceRectAtTime();// text box
l = b.left;
t = b.top;
h = b.height;
tl = sourceRectAtTime();// this layer text box
tll = tl.left;
tlh = tl.height;
tlt = tl.top;
sp = h * .3;

[p[0] + l - tll, p[1] + t + h - tlh - tlt + tlh + sp]

The expression starts by identifying the master text layer as the layer above the current layer. The position of the top text layer is retrieved as the variable "p." It then defines the left, top, width, and height of the master text layer. Padding as a percentage of the height of the master text layer is retrieved. The next lines define the left height and top of the current layer. 

The final line takes the current X position of the master layer, adds the left, value of the master layer, and subtracts the left value of the current layer to keep the layers lined up on the left edge no matter what the paragraph justification is. The Y position of the master layer is now added to the top plus the height of the master layer, and then the current layer height plus the top is subtracted, and the space is added between the layers. 

The expression keeps the two layers lined up on the left edge and puts the second text layer below the first. 

The first part of the problem is solved. You could add a slider control and do a little math to make it easy to adjust the size of the space between layers. 

The next step is to create a shape-layer rectangle that is big enough to cover both text layers plus horizontal and vertical padding while tying the position of the shape layer to the position of the master text layer. To start, just use the pickwhip to tie the shape layer's position to the top text layer with this simple expression:

thisComp.layer(index - 2).position

The next step is to create a rectangle that is the size of the two text layers plus some horizontal and vertical padding. Here's the expression for that:

l1 = thisComp.layer(index - 2);
b = l1.sourceRectAtTime();// text box
w = b.width;
h = b.height;
lp = b.height * .3;
l2 = thisComp.layer(index - 1);
l2b = l2.sourceRectAtTime();
l2w = l2b.width;
l2h = l2b.height;
x = Math.max(w, l2w);
hPad = 80;
vPad = 40;
[x, h + l2h + lp] + [hPad, vPad];

The l1 and l2 variables refer to the two text layers. I retrieve the width and height of both layers plus the padding between layers (lp). To find the widest text layer I use the Math.max(v1, v2) function to tell me which layer is wider. Then the x width is retrieved and the height of both layers plus the padding (lp) is added, then the horizontal and vertical padding are added to the rectangle. 

Again, the hPad, vPad, and lp can be attached to sliders. The result of this expression is a rectangle that will be the same size as the two text layers, plus the padding and line spacing.

The last step is to modify the Rectangle 1/Position property with this expression. Again you have to use the top and left values for the master text layer and factor in the padding and the size of the rectangle so that the top left corner of the Rectangle is positioned at the top left corner of the master text layer (index - 2) and offset that value by the horizontal and vertical padding.

Here's the expression for that part of the project:

b1 = thisComp.layer(index - 2).sourceRectAtTime();
b2 = thisComp.layer(index - 1).sourceRectAtTime();
t = b1.top;
h = b1.height;
l = b1.left;
w = Math.max(b1.width, b2.width)/2;
sh = content("Rectangle 1").content("Rectangle Path 1").size[1]/2;
vPad = 40/2;
[l + w, t + sh - vPad]

Again I use the Math.Max(layer 1 width, layer 2 width) to find the widest layer. and the left + width and top + the rectangle size minus half the vPad (vertical padding) are used to position the rectangle.

So you end up with three relatively complex expressions to tie text layers and a shape layer to the combined size of two text layers and one simple expression to tie the position of the shape layer background to the master text layer. I hope this helps. 

There is a tutorial in the works that explains the workflow in detail, and it will come with some sample files and a set of Animation presets. 

I've included a project file for you.