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 😭💜
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.
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
Yeah. Use a PNG of a ripped piece of tape and follow this tutorial for it to auto-scale and position to the text: czcams.com/video/IPSUJKKgqCk/video.html
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.
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
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
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.
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};
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
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]
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");
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?
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
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?
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
@@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!
//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)
@@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)
@@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]
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?
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.
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
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
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.
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"
![I Replaced ALL my ADOBE APPS with these [free or cheaper] Alternatives!](http://i.ytimg.com/vi/5EfqHg49kMk/mqdefault.jpg)
The moment I type that first "const" expression in I get an error: "Variable name expected"...what am I doing wrong?
In After Effects go to File > Project Settings > Expressions, and change the Expressions Engine from Legacy ExtendScript to JavaScript
My mind is blown. My socks are off. My hair is back. My jaw is on the floor.
Love you too Jake
Jake brought me here. Subscribed
Wow! Just when you thought you knew AE, someone comes and proves you wrong. I've been humbled. 👏🏾 👏🏾 👏🏾 🔥 🔥 🔥
That cute dog though. Thanks for the tutorial ❤❤❤
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 😭💜
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.
Thanks for the tutorial!! wonder how to align the text box tail with the text box tho?
It worked for my 64-bit PC. Thanks a lot.
not know , but just know you've affected my life, and apparently tens of thousands of others, in an imnsely positive way. Thank you
Contenido de calidad. Gracias!
It was the sa for , In the GMS I switched the "Program" to "Analog app 1 TE"
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!
It's very helpful man. Upload more tips videos on after effects.
This is truly a perfect tutorial. Thx a lot !
Thankx for breaking it down.. great tutorial for b
TNice tutorials person speaks the truth, the whole truth and notNice tutorialng but the truth
Thank you. It helped a lot!!
Bien explicado y 100% funcional, ya tengo el programa en modo profesional. ¡Gracias!
Will be following
Health to you, brother!
YO THANK YOU SO MUCH
nice tuto, I had the sa issue
Is there a way to animate the box so the type animates with the shape of the box? like a bento box?
Sa here bro had everytNice tutorialng sitting for half a year before I started to dive in
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?
Yeah. Use a PNG of a ripped piece of tape and follow this tutorial for it to auto-scale and position to the text: czcams.com/video/IPSUJKKgqCk/video.html
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.
And I struggle with animated only text without the box moving with this code 🥲
When i try to pull out the bar with all the tutorial it does not work
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
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
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
@@MographMindset Thank You so much !!!!!
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.
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};
@@MographMindset Thanks a lot! You recommend to stay in JavaScript all the time and adapt expression from Legacy ExtendScript then ?
@@viviancantillon97 100%
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
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
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]
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");
@@MographMindset Oh my God! Thank you soooo much!
Best!!!!
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?
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
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?
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?
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
@@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!
@@carolpedro3376 that's great to hear! Glad you got it working
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?
Try using the 'Fast Box Blur' effect with the 'Repeat Edge Pixels' option enabled.
Great tutorial. How do you auto resize the textbox to the maximum width of two or more separate text layers?
//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)
@@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)
@@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]
its stuck on the loading screen.. : (
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?
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.
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
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
Great explanation but still confused
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.
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"
@@MographMindset thanks bro 😁
como animar los textos?
Bruhh.. I did it too haha
Hahaha! too brother, too.
is it possible to use this textbox as a preset?
Select the Shape Layer and go to Animation > Save Animation Preset...
Are you live?
TNice tutorials was for 2 years
OMG ITS WORKED. Guys it really worked. Thank you
help a upcoming artist out I don’t have a problem paying u for your ti
Sa