How to animate box shape to grow along with Typed Text

If you want the rectangle to fill with each character as it appears, then you could use a Sequence Text behavior instead.

In the Sequence Text, Add Parameter > Format > Scale.

Set the Scale.X value to 0%.

Set the Spread to 0.

You can set the speed of the animation by increasing the End Offset parameter.

For the Rectangle:

Add Parameter Behavior > Link.

Set the Source Object to the Text with Source Parameter Object Width [Object Attributes > Size > Width]

Here's my project:

https://fcpxtemplates.com/sdm_downloads/typeon-w-bg-fill/

(Duplicate it and save a backup!) You shouldn't have to backdate it (Motion 5.4.7).

This example:

• Has the In Point (as per your example) set at 1 second.
• Automatically aligns the rectangle to the text.
• Automatically adjusts the rectangle Anchor Point according to its current size.
• Will automatically adapt to any Text Justification (left/center/right — this effect setup doesn't work with multiline texts).
• Will automatically adapt to any screen position the text is at.
• Adjusts the text's anchor point according to its height. This is important to make sure that the Rectangle will align (closely) along its vertical center. [Notice the Scale is set to 0.25 - most fonts are ~3/4 up for ascenders and ~1/4 down for descenders. Also Note: no two fonts are exactly the same... ***escpecially*** script fonts which will frequently cross their "bounding box" lines. You can make the Rectangle manually adaptable with Offset parameters (if you plan to publish this to Final Cut.)]

When retiming this effect, only use In and Out Point control on the parent group. You MUST set the End Offset of the Sequence Text to 0 before editing In/Outs. You cannot drag any layer or the group in time. Otherwise *everything* falls apart. Use the technique I outlined above to reset the End Offset for "write on" timing.

You have entered the Everything Matters Zone in Motion (example: the order of Link Behaviors added). (95% of just about every Motion video tutorial has the phrase "it doesn't matter" used about some thing... that is such a poor notion to put into people's heads when it comes to this app.)

Ask questions!! I don't expect you to know, at this point, exactly what I've done. Everything is labelled so you should figure out what supposed to be doing what, but the "why"'s might not be all that obvious.

You can't link the Rectangle width to the X Scale, that's now how Sequence Text works. You need to use the Text's "absolute" width at any given point in the animation by using the Object > Object Attributes > Size > Width parameter available as a Compatible parameter in the Link behavior.

The Apply To parameter is

Object > Shape > Size > Width [**not** object attributes > size...]

The Link behavior is what you are looking for. This is actually easy to do. I am away from my mac now but basically you add a link behavior to the rectangle to er… link its width to the width of the text.

I believe there was an old video from the rippletraining guys explaining this very well (as they always do) but I am not sure if I can find it. If I do, I will post the link (no pun intended).

I found this gem from 2013. It does not describe the exact situation you want but does beautifully illustrate the use of the link behavior. You can see that the version of Motion looks different (it is before 5.3) but all the principles are the same.

https://www.youtube.com/watch?v=p7fAhcj0h7A

Move the playhead where you want the animation to start. Select the group containing the text and the Rectangle and type 'I' to set an In Point. You will need to reset the End Offset in the Sequence Text to "fix" the timing of the animation (because the number of frames will have been shortened). The easiest way to do that is move the playhead to the point where you want the animation to finish, then, starting with End Offset at 0, increase it's value until the "write on" is finished.

For some reason, all the "assets" in the group must be set at the same time (therefore setting the In Point of the group). Moving the layers individually really messes things up!

If this doesn't fix it, let me know — there's another (not as easy) way.

Is there a comprehensive manual/book where I can understand the inner workings of Motion? Despite its quirks, I think a whole lot powerful stuff can be created with it.

Unfortunately, no — not that I know of. There is a level of documentation that addresses *most* user's needs. There was a time when trainers were "Apple Certified", but still only trained at the levels of Apple's documentation. There are things in Motion I'm not even sure Apple programmers are aware of (and as an ex-programmer, I can tell you that definitely happens!)

I can tell you that what you see in the UI is not all that is there. By that I mean that you can only see up to 4 decimal places (which Motion "rounds" automatically for viewing), but I can assure you that Motion maintains 14 decimal place accuracy. You can use a Numbers generator to see up to 10 decimal places (or if you scale the Value by 1000, you can see all the significant digits.) [The so-called "experts", like Simon Ubsdell, don't even know this. I've seen a video of his where he basically "writes off" using extra decimal precision simply because Motion rounds those visible values... he doesn't know...!]

Some values you see look like one kind of format, but will actually exist as some other format. For instance, the Twirl Filter > Twirl parameter looks like it's in degrees — the value even has the degrees symbol (º) by it, but if you link up the Twirl default value (180º) with a Numbers generator and take a look at its Value, you will see 31.4159265359 which is ... strange. It's obviously π*10. I figure that Motion keeps data like this behind the scenes to maintain increased precision — there is, however, no documentation regarding any of this... so it's just a guess.

The best way to find out what's going on is to explore! Keep an open mind and try to rationalize what it is you're actually seeing! (And, figuring out how you can manipulate it to serve your purposes!)

I've been using Motion for a little over 17 years and I'm still finding out new things about it.

Sorry about the delay — I was **not** notified about your post! I just saw it.

You can ask, but I may not tell... depends. I still have a few secrets.

Contact me through here:

https://fcpxtemplates.com/contact/

Fox

How did you link the rectangle width to the Title width?

Using a Type On behavior doesn't provide a changing width value.