Text length > transition completion?

What you need is the linear() interpolation function. This basically lets you map one set of values to another. This is also helpful because any easing you apply to your original keys will translate to your new values. The expression would look something like what I'm posting below. I don't know exactly how your project is set up but hopefully this is enough to point you in the right direction. I'm also attaching a simple AEP file in case the expression does not make sense on its own. You can grab that here.


var textLyr = thisComp.layer("name");
var pad = 20; // (in pixels);
var skewDeg = -15; // guessing here. enter your skew val.

var textLyr_bounds = textLyr.sourceRectAtTime(time,true); // get bounds of text layer as object.
var textLyr_w = textLyr_bounds.width * (textLyr.scale[0]/100); // calc width of text, consider X-Scale
var textLyr_h = textLyr_bounds.height * (textLyr.scale[1]/100); // calc height of text, consider Y-Scale

var skewOff = textLyr_h * Math.tan(degreesToRadians(Math.abs(skewDeg))); // calculate offset for slant.

var startWidth = 0; // value for first key.
var endWidth = textLyr_w + skewOff + (2*pad); // value for 2nd key.

var h = textLyr_h + (2*pad); // height remains constant.


// this is the complicated bit.
// Basically this says:
// As the X value (value[0]) goes from the value of the first keyframe to the
// value of the second keyframe, interpolate between and return a value from
// the value of variable startWidth to the value of variable endWidth.
var w = linear(value[0],key(1).value[0],key(2).value[0],startWidth,endWidth);

// set values
[w,h];

David Conklin
mographcode.tumblr.com

OMG it works! Thanks a bunch David! That's a really big help. You even got the slant exactly right :-D

In order to get the box to position correctly around the type, the anchor point has to be centered on the type. I placed an expression to keep the anchor point in the centre, but it does make the type behave as center-justified even if that's not how it's set in the paragraph panel. To fix, simply add the following expression to the position property on the type layer. All it does is forcibly offset the position of the type to make it appear as if it writes out from the left (it's actually writing from the center, but moving to the left at the same time so it seems like it's left justified).

var box = sourceRectAtTime();
var w = box.width * (scale[0]/100);
[value[0]-w/2,value[1]]

I also made a new file with right justified type (I just applied that expression). Let me know if that works for you.

David Conklin
mographcode.tumblr.com

Hi David!
I´m working on a similar task. The thing is that I´d like the text+box animate from left to right. Would you mind telling me how to achieve this?

Best, Jake