SourceRectAtTime() Expression- Adobe After Effects tutorial

The new sourceRectAtTime() can get you the width and height of text and shape layers. It’s new but it’s good. If you have Ae CC 2014.2 (aka 13.2.0.0) then you can enjoy this. If you don’t have that option open and you want to make solids resize to text you should check out an older tutorial on this site.

 

This tutorial also talks for a long time about expressions in general, so if you’re not into that… get out now!

 

This is the expression we wrote on the size:
s=thisComp.layer(“Hello people”);
x=s.sourceRectAtTime(time-s.inPoint,true).width;
y=s.sourceRectAtTime(time-s.inPoint,true).height;
[x,y]

 

This is the expression we wrote on the position:
content(“Rectangle 1”).content(“Rectangle Path 1”).size/2

 

If you have any questions just let me know in the comments.

 

Download this project file:

This file ONLY works in After Effects 13.2 and newer.

Download DirectDownload Via GumRoad
ecabrams
evan.abrams@gmail.com

16 Comments

  • Robert

    21.02.2016 at 02:02 Reply

    I added a wiggle to the anaitmor that was doing 3D position. The mode was Add and I keyed Min 0 at start and finish and then keyed -15 in the middle and it gave and nice little one bounce effect.Not Inertial but not bad!

  • Ze'ev Gilad

    07.12.2016 at 17:08 Reply

    This is great, but is there a way to set the anchor point to the absolute center or corner of the region? It seems to have 0,0 at the bottom of the first row of text, whose height is arbitrary based on font and size.

    • ecabrams

      07.12.2016 at 17:15 Reply

      Hey Ze’ev. First, the anchor point is certainly not “arbitrary”. The anchor point for text is based on the paragraph settings and located at the baseline in keeping with the paragraph settings. You could use the sourceRectAtTime to relocate that anchor point into the middle centre of a layer if you wanted. You would simply need to move it to the average of the height and width right?

      • Ze'ev

        09.03.2017 at 15:41 Reply

        By “arbitrary” I mean that I don’t see a way to get its value through expressions. [0,0] seems to be at the center of the baseline of the first line of text. Which would change based on the font size of the first line. I need to vertically center blocks of text that have different font sizes.

        So not sure what you mean by “use the sourceRectAtTime to relocate that anchor point” … I can offset it from 0,0 — but I don’t know where 0,0 is relative to the bounding box.

        Or maybe I’m missing something.

  • Bardot

    07.07.2017 at 10:23 Reply

    Thank you so much for this! Big time saver!
    But I am trying to add a little chat bubble “tail”. I cannot add it to the rect,
    If I add a shape it won’t align to the bottom of the rect while the rect changes its size.
    I cannot seem to connect the “tail” to move with the bottom line of the rect.
    Or is it possible to add that shape directly to the shape of the rect?
    Tips are welcome and appreciated, as I am not very good in expressions, more the keyframe kind of girl 😉

    • Bardot

      07.07.2017 at 10:40 Reply

      thisComp.layer(“BOX”).content(“Rectangle 1”).content(“Rectangle Path 1”).size

      fowls ot, But in both directions. x and y scale. But I only want to move it up and down, aligning to the bottom of the rectangular and .

  • Tristan Summers

    06.12.2017 at 11:06 Reply

    Has anyone ever made this work with centre aligned text and rounded corners, allowing for multiple lines? Animation template maybe?

  • Costel S

    07.02.2018 at 13:22 Reply

    What if I want to start the width and hight from a specific value and then the Box scaling beyound those values with the length of the text if its a long pararaph.
    For like a tweet box

    • ecabrams

      26.05.2018 at 10:29 Reply

      You may need to use a if/eles expression in that case.

  • Emiliano

    22.02.2018 at 13:22 Reply

    Hi Evan,

    Very nice tutorial.

    I don’t know much about expressions, so I’m posting my question here:

    What if I want to align the text on the right and have to box grow on the left instead?

    Thank you

    • ecabrams

      26.05.2018 at 10:28 Reply

      Then you will need to make use of dynamically changing the position of the parametric rectangle as the size changes. For example if you link the position to be 1/2 of the size that would make it seem like the box grows from one corner.

  • valdiola

    02.04.2018 at 17:15 Reply

    Hi!

    the code worked fine to me, thank you very much for the explanation.

    I only have a question about the “time-s-inpoint”.. why we need to used and what’s the meaning and use of “ïnPoint”.

    Regards.

    • ecabrams

      26.05.2018 at 10:30 Reply

      the inPoint is the time where the layer’s In Point is. So let’s say the layer ran from 1 second to 10 seconds, the in point is 1. Does that clear it up?

  • Satwinder Kang

    28.08.2018 at 06:45 Reply

    Hi great tutorial, just downloaded your project file. When i change the size of the font, the rectangle changes size but moves off above e the text. This results in the text and rectangle separating.

    Any advice as to how I can alter the text size and retain the rectangle box at the same time.

    Thanks

    Sat

  • Emiliano Grimaldi

    05.09.2019 at 08:37 Reply

    Hi Evan,

    I think your tutorial is great and simple, I’m trying to figure out how can I resolve this:

    I have two dynamic boxes/titles that should have a relationship with each other.

    The two boxes contain titles and are on top of each other on the Y-axis.

    I would like an expression that makes both boxes/titles expand to the width of the longer box/title, i.e. The one with the longer text dictates the width of the boxes.

    Thank you for any help!

    • ecabrams

      01.10.2019 at 19:55 Reply

      You can use an if/else expression to make that happen. The logic is:
      if (a>b) {a} else {b}

Post a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.