Easy Text Box - Q&A | sourceRectAtTime Expression

[@TonyMuzzatti]

The moment I type that first "const" expression in I get an error: "Variable name expected"...what am I doing wrong?

[@MographMindset]

In After Effects go to File > Project Settings > Expressions, and change the Expressions Engine from Legacy ExtendScript to JavaScript

[@JakeInMotion]

My mind is blown. My socks are off. My hair is back. My jaw is on the floor.

[@MographMindset]

Love you too Jake

[@cferracini]

Jake brought me here. Subscribed

[@cordel_ringani]

Wow! Just when you thought you knew AE, someone comes and proves you wrong. I've been humbled. 👏🏾 👏🏾 👏🏾 🔥 🔥 🔥

[@Anonymous-cn6zl]

That cute dog though. Thanks for the tutorial ❤❤❤

[@jasonrodriguezarias3273]

It worked for my 64-bit PC. Thanks a lot.

[@junda17]

duuuuudeeee, i've watched a ton of tutorial on how to do this stupid ass box behind my text, and always the padding was wrong, when I added a new line of thext tha padding was multiplying and not working until this tut helped me! thank you so much.

[@bellasun4549]

Thanks for the tutorial!! wonder how to align the text box tail with the text box tho?

[@Animotion1]

Oh my god this is a tutorial that I didnt know I need!! Thank you so much for sharing. Now I don't have to resize my shortcut text boxes manually anymore in my videos 😭💜

[@kaushalkakadiya4494]

not know , but just know you've affected my life, and apparently tens of thousands of others, in an imnsely positive way. Thank you

[@ezehughes]

Contenido de calidad. Gracias!

[@spiritualindia5830]

aah, i just got into making soft rn and tNice tutorials is so helpful and your voice is so sootNice tutorialng btw! thanks for tNice tutorials tutorial

Keep doing these things, don't stop! It is nice!

[@ArthurGanem]

This is truly a perfect tutorial. Thx a lot !

[@arts9466]

It's very helpful man. Upload more tips videos on after effects.

[@alfonsoledesma5022]

Thankx for breaking it down.. great tutorial for b

[@dominiquesolmarin9608]

TNice tutorials person speaks the truth, the whole truth and notNice tutorialng but the truth

[@filipecaldasmotion]

Thank you. It helped a lot!!

[@MyTrycs]

It was the sa for , In the GMS I switched the "Program" to "Analog app 1 TE"

[@isaacanani]

Will be following

[@deyluvlathan5085]

Health to you, brother!

[@capilicyril8994]

YO THANK YOU SO MUCH

[@afroditabelen1436]

Bien explicado y 100% funcional, ya tengo el programa en modo profesional. ¡Gracias!

[@bkaextream5537]

nice tuto, I had the sa issue

[@lushprod]

Is there a way to animate the box so the type animates with the shape of the box? like a bento box?

[@danieltuma5834]

Sa here bro had everytNice tutorialng sitting for half a year before I started to dive in

[@hanafar9159]

Best!!!!

[@WalkAway273]

Thank you so much for the tutorial! this really helps me. But is there any way to move only a text without moving the box or leaving space on only one side? In my work, I use long text and want to leave the space only on top. I try to scale and type but it ends up with a HUGE box.

[@WalkAway273]

And I struggle with animated only text without the box moving with this code 🥲

[@viviancantillon97]

Hi! "Variable name expected" is off when i change to JavaScript like you said but i have another expression that seems to only work in the Legacy ExtendScript. Here is the expression i have : if(thisComp.layer("CTRL COLORS").effect("COLORS")("ADBE Slider Control-0001")==1)100 else 0; And it says "Error : SyntaxError : Unexpected token 'else' Can you help me ? I'm not familiar with expressions but i want to keep the text box follows the text and anchor point but also be able to change the color of text with a slider control.

[@MographMindset]

This is a common problem because After Effects is so old, and people copy+paste old expressions from online forums and videos. The older syntax is unfortunately incompatible with the new JS engine. To fix it, you just have to update the if/else syntax with curly braces {}. Like this: if (thisComp.layer("CTRL COLORS").effect("COLORS")("ADBE Slider Control-0001")==1) {100} else {0};

[@viviancantillon97]

@@MographMindset Thanks a lot! You recommend to stay in JavaScript all the time and adapt expression from Legacy ExtendScript then ?

[@MographMindset]

@@viviancantillon97 100%

[@grinnlock]

Great Tutorial man ! I am using the padX and padY as an a way to open and close the text since the stroke doesnt deform, but it only pads from the center. Is there a way to pad from the sides, and not just the center ? Anyway you tutorial helped me allot at my work. Thank you so much

[@MographMindset]

On the Text Box Layer look below "Size" (and above "Roundness") to find the Rectangle's "Position" property. Write: const [x,y] = content("Rectangle 1").content("Rectangle Path 1").size.value; [x/2, 0] This moves the shape's anchor point to the left edge (for the right edge, change "x/2" to "-x/2"). You also need to ignore the video at 4:05. (Don't use "+transform.AnchorPoint" on the Layer's Position expression). Hit Layer > Center Anchor Point in Layer Content. Now the box will scale from the side

[@grinnlock]

@@MographMindset Thank You so much !!!!!

[@smithapatel9535]

When i try to pull out the bar with all the tutorial it does not work

[@nguyenquynhnhu6026]

Sa af, I have so so many soft and lodies in my head and I have absolutely no clue how to put them into soft or any way to make

[@pibezZ666]

I need a Textbox that isn't rectangular, but hast jagged edges to the left an right, like a ripped of piece of tape. Is this somehow possible?

[@MographMindset]

Yeah. Use a PNG of a ripped piece of tape and follow this tutorial for it to auto-scale and position to the text: kzbin.info/www/bejne/f4G2hn2BgMykec0

[@davehedric1543]

Thank you for this tutorial!! Another question: Is there a way to create a write-on animation with this text box? i tried to do it with text animators opacity and it didn't work as planned since the box ignores the letters opacity setting. is there a solution to this in expression form or otherwise?

[@MographMindset]

Use the "Blinking Cursor Typewriter Console" effect preset that is included with After Effects. It will animate the Source Text property + Text Animators and then the box will follow correctly

[@yara_camper]

hi, thanks a lot for the tutorial. I wanted to ask a question: how to make the blur effect in the text animator not affect the size of the text box?

[@eugenn2848]

Try using the 'Fast Box Blur' effect with the 'Repeat Edge Pixels' option enabled.

[@gmioperationsteam]

Hi i am using source text to key frame text, something like sub titles, is there a way this expression might work for all source text keyframes

[@MographMindset]

yes, sourceRectAtTime() updates based on your text and works inside AE. But for subtitles, I would suggest creating a .mogrt and using the .mogrt inside Premiere. Much easier & faster

[@vickykrupa7825]

I'm trying to open it up as I type tNice tutorials. I'm lost right now and my opening screen looks notNice tutorialng like Nice tutorials. Can anyone help?

[@helga_eizaguirre]

Hello Mograph Mindset: I've done everything as you said but when adding the padding expression; const { left , top , width, height } = parent.sourceRectAtTime(); const xPad = effect("x Padding")("Slider") const yPad = effect("y Padding")("Slider") [width , height + yPad].... It appears a message error: Expresson Disabled: Error at line 4 in property "size" o Cannot access "yPad' before initialization and shows [width, height + yPad]

[@MographMindset]

That error means you need to add a semicolon ; after every line in your code. You don't need a semicolon on the final line. const xPad = effect("x Padding")("Slider"); const yPad = effect("y Padding")("Slider");

[@helga_eizaguirre]

@@MographMindset Oh my God! Thank you soooo much!

[@ajaynaran1480]

Great tutorial. How do you auto resize the textbox to the maximum width of two or more separate text layers?

[@MographMindset]

//Get the Max Width of two text layers w1 = thisComp.layer("Line 01").sourceRectAtTime().width; w2 = thisComp.layer("Line 02").sourceRectAtTime().width; Math.max(w1,w2)

[@ajaynaran1480]

@@MographMindset Okay so I have: const {left, top, width, height} = parent.sourceRectAtTime(); const xPad = effect("x Padding")("Slider"); const yPad = effect("y Padding")("Slider"); [width + xPad, height + yPad] And that is attached to the first text layer and that works fine, but I have a second text layer and I want that to do same thing. So where does this code fit? w1 = thisComp.layer("Line 01").sourceRectAtTime().width; w2 = thisComp.layer("Line 02").sourceRectAtTime().width; Math.max(w1,w2)

[@MographMindset]

@@ajaynaran1480 That code I gave you is just for getting the Max Width of two text layers. There's many different ways to write this, but you can use the code below: const {left, top, width, height} = parent.sourceRectAtTime(); const xPad = effect("X Padding")("Slider"); const yPad = effect("Y Padding")("Slider"); const w1 = thisComp.layer("Line 01").sourceRectAtTime().width; const w2 = thisComp.layer("Line 02").sourceRectAtTime().width; const maxWidth = Math.max(w1,w2); [maxWidth + xPad, height + yPad]

[@helga_eizaguirre]

Hello Mograph Mindset: Can you make a video of how to create several clips, each one with a tittle, subtittle, etc... load them from an excel. This is a repetitive task i have to do everyweek. I tried from primiere pro but i could not... so, i am trying to create just one from After Efects.. but is not what I need.. I need to create several ones with texts from an excel, even audio from an excel . The audio should syncronize with the tittle and sub tittle. I also want that the text boxes are all the same lenght.so, if there are 4 text boxes. All of them has the lenght of the longest one? is that possible?

[@MographMindset]

Automating this entire process is highly complicated. You can check out Templater for After Effects. Inside Premiere Pro check out Submachine by Creative Workflow Solutions.

[@bantintuc3411]

Great explanation but still confused

[@dobled4096]

its stuck on the loading screen.. : (

[@carolpedro3376]

In a small caps text only, how to make the text box never resize/move up or down, no matter if there is there is any descender or ascender?

[@MographMindset]

Unfortunately this is a common problem with text boxes. The height of the text layer calculates the descenders and ascenders. You can use 2 separate layers for the Text and Box to make things easier. Try this. We'll replace every character with "x" for the box shape so there's no descenders. 1. Remove all effects from the Text Layer 2. Duplicate the Text Layer and name the duplicate "BOX" 3. Parent the "BOX" to the original Text Layer 4. Add this expression to the "BOX" Source Text: var txt = parent.text.sourceText; txt.replace(/./g, "x") 5. Your "BOX" layer should now just be a bunch of x's 6. Add a Simple Choker effect (set View to Matte), Fill effect to "BOX". It should now look like a solid box. 7. Expand padding of "BOX" with CC RepeTile or Minimax effects

[@carolpedro3376]

@@MographMindset I've found in another channel how to make the box parameters attached to the text parameters (like width) with a Adjustment layer with five Expression Controls: Layer control (dropdown menu control) > to refer to text layer Edge (point control) > fixed, ~ half of the text height Height (slider control) > fixed (according to text body Width (slider control) > expression sourceReactAtTime HeightWidth+Edge (point control) > expression: effect width slider, effect height slider + effect edge point I had to change the anchor point of the text, and set the edge value in a way that text and box always align in the visual middle height. (My text is paragraph aligned to the left btw) It solved my problem, since I needed to use upper case characters with marks (Ü, Á, È, Ç), in many languages. Thanks though!

[@MographMindset]

@@carolpedro3376 that's great to hear! Glad you got it working

[@jhonhuaman9014]

Hahaha! too brother, too.

[@DanielaMunoz-g4k]

how can i make it so i have an avatar that is also responsive to the text and box layer? say i want to make a responsive tweet and i code everything to work with the text i am typing in but the avatar, i want to always stay at the top left corner

[@MographMindset]

Parent the avatar to the box, and then add an expression to the avatar's Position to pin it to the top-left of the box. Something like: -- const {left, top, width, height} = parent.sourceRectAtTime(); [left, top] -- You can adjust your avatar Anchor Point or play with the expression to offset it

[@dakshaservices4714]

Are you live?

[@imaby.k]

I'm facing an issue, my text layer bounding box is not changing when I write in more text and its cropping the extra text untill i manually change adjust the text layer bounding box, ( here I'm not talking about the rectangle shape layer) and thus I am not able to use this effect, please help if you have any solution to this.

[@MographMindset]

It sounds like you're using "Paragraph Text" instead of "Point Text". Select the Text tool, then right-click the Text layer. Hit "Convert to Point Text"

[@imaby.k]

@@MographMindset thanks bro 😁

[@nara7280]

Bruhh.. I did it too haha

[@agenciagrou1013]

como animar los textos?

[@oleksandrklitnii566]

is it possible to use this textbox as a preset?

[@MographMindset]

Select the Shape Layer and go to Animation > Save Animation Preset...

[@cashsot]

TNice tutorials was for 2 years

[@klizx6846]

OMG ITS WORKED. Guys it really worked. Thank you 

[@rodneylongart7735]

help a upcoming artist out I don’t have a problem paying u for your ti

[@malikg3485]

Sa