How to create responsive textbox with left-aligned text

[@DavidLindgren89]

I hope this video helped you! 🙂 Want help to grow your KZbin channel? 📈 TubeBuddy is the #1 Rated Extension for KZbin Creators. Install for FREE 🎁 here: www.tubebuddy.com/freetrial?a=davidlindgren1989 🎞 See all my After Effects tutorials here: kzbin.info/aero/PLgJlbAYg0mEnZDvh9LUAz-t0rAjCgH8IQ 🎞 See all my Premiere Pro tutorials here: kzbin.info/aero/PLgJlbAYg0mEkXrbeSUcXFU8ax-y-21Ndb

[@comcomon]

This way is just perfect. I've been looking for this way. I really appreciated it.

[@DavidLindgren89]

Glad you found this helpful! 😃

[@kat5702]

This is extremely helpful, concise and clear. Thank you so much.

[@ToniLeirvikLarsen]

Great tutorial! Now let's see if I'm able to re-create it on my own in AE 🤓

[@DavidLindgren89]

Otherwise I have some responsive graphic done for you at gumroad.com/davidlindgren89 😃👍

[@mfarshidfar]

Very helpful tutorial. Thank you man! This saved me tons of time.

[@DavidLindgren89]

Awesome! Happy to hear that! 😃 I have some digital products as well that might even save you more time! You can check it out here: davidlindgren89.gumroad.com/ (Both free and paid versions available!) ✌️

[@Azbayar]

GREAT! Simple tutorial.

[@DavidLindgren89]

Glad you liked it! 😃💪

[@jeorc]

Awesome content! Could you take some time to explain how to write the expression. I'd love to understand the logic behind them. Thanks for sharing.

[@DavidLindgren89]

Thank you Johan! :) I appreciate that! To be honest, I don't know exactly how it works, but I can tell you what I know. For example: s = thisComp.layer("Example123"); This means that you are defining the variable "s" (could be called anything, but in this case it's just the letter s) to the layer called "Example123" in the current composition. So any code you write below this where you type in "s", you are basically reffering to "This composition" > "The text layer called Example123". So you can see "s" as the "nickname" for the text that comes after "=". After that, you define "x" and "y" the same way. Then when you write [x, y] you are telling the rectangle that the first value of the rectangle size (which refers to the width of the rectangle) should be "x" and the second value (which is the height of the rectangle) should be "y". That means the width will be whatever you defined "x" to be, and height is whatever you defined y to be. Hope that helps a little bit! 🙂

[@jeorc]

@@DavidLindgren89 Thank you so much for taking the time to answer my question. This definitely helps me understand more of this part of AE. Keep up the great content!

[@DavidLindgren89]

No problem Johan! We are all hear to learn, including me! 😃

[@FaizyabHussain24]

Extremely helpful thanks alot

[@Uzbekistanuz]

Thank you Bro!

[@DavidLindgren89]

No worries mate! ✌️

[@RayhanAlfikri]

thank you u helped me a lot sir

[@DavidLindgren89]

Happy to hear that! 😊

[@OlleWtn]

Q: The background border changes size in Y when I use a bigger character like 'yjg', how to I keep the border the same size whatever characters I use? I can't use a matte to keep the border in shape in this case as I'm using rounded corners

[@fernandabravo4866]

Thank you!!!!!!!

[@DavidLindgren89]

No problem :) Glad you liked it!

[@VictorAlmarza]

Thanks a lot friend, this is unbelievable helpful. Now, do you know how to do same thing but with an irregular (and not predefined) shape? for example, a shape that does not have X and Y parameters. Thank you again.

[@DavidLindgren89]

Glad you liked it! 😃 Tricky question though.. In order to have it responsive, I think you need to tell software what side you want to extend or what anchor points you want to move. 😬 Not seeing a simple way to answer that question. Kinda depends on how the shape looks like also. You might be able to do a workaround with 3 shapes where the middle one is extending and the other 2 shapes are kinda attached to each side. Hope u understand what I mean :) But yea, again, it's a workaround.

[@cotemoraga3608]

how do you adjust the shape to more than one line? because it doesn't align with the text if it's longer than one line, thanks

[@DavidLindgren89]

I have done a separate tutorial about that actually :) You can find it here: How to resize background to my text layer kzbin.info/www/bejne/emKcmoyujJKGhdE Hope that helps!

[@AC-id5ow]

Is there a method to have the box sized to one word at a time and a slider to cycle through the words in a sentence?

[@DavidLindgren89]

Hey! Check this tutorial for the answer: kzbin.info/www/bejne/j3q2YoV_irupq5Y At 1:55 I show you where you can change between character and word. Hope that helps! :)

[@magnumsson]

Great tutorial , but how do I make it work for right-aligned text?

[@DavidLindgren89]

Great question! I'm not 100% sure about this, but maybe if you right-align the text in the Paragraph window and then just change "Rotation" to 180 degrees. Then it should grow the other way. (So the rectangle is basically upside down.) Let me know if that worked! :)

[@kevinaloui6538]

@@DavidLindgren89 It works, thanks!

[@DavidLindgren89]

Happy to hear that! :D

[@shaf_cronbay8011]

It is working and responsive but also working in two line but not aligning perfectly although I tried with anchor point so that rectangle will grow in center alignment with the text layer, but it is not aligning and text go under the shape, pls help me for double line text However I checked another video which is for two or more text layer, but I want same one text layer needs to be done Pls help me out as this same video tutorial text

[@alirezaaliyan8495]

how can we have this cool effects on some arabic or persian text cause these languages are right to left unlike the english which is left to right.

[@DavidLindgren89]

If you right align the text (in the Paragraph-window I believe it's called) you can then maybe rotate the rectangle 180 degrees, so it's upside down. That way, it should grow from right to left. Let me know if that worked! :)

[@DavidLindgren89]

I just made a KZbin Short answering this question! 🙂 Check it out here: kzbin.infoHadTEU3GKiU?feature=share

[@six-prints]

Can this work the text animator? I've set it up with a keyboard effect (per word) but the opacity animator is ignored by text ;(

[@The_Courage.]

0:01 do you have a tutorial on how u did this bottom intro text box animation ?

[@പൂക്കാത്തമരം]

How is it work with multilines?

[@DavidLindgren89]

This tutorial is only about text with one row, but if you have multiple rows, it will adapt to the longest row. Hope that helps! :)

[@mehdiheidari4958]

Great tutorial, I have a question I have this code for a subtitle text box : text=thisComp.layer(""); width=tex.sourceRectAtTime(time-tex.inPoint,true).width+45; myFade = 12; if ( marker.numKeys > 0){ m = marker.nearestKey(time); t = m.time; d=linear(width,0,1400,45,1400); if (t

[@DavidLindgren89]

I think I know what you are asking but unfortunately I don't have a good answer to it, sorry :/ Anyways, thanks for watching and commenting! 🙏

[@FadeThePlayer]

Is it possible to have this for an animated underline for the text that's also responsive?

[@DavidLindgren89]

That should be possible, but depends what type of animation it is. You could simply turn the shape into a transparent background with a border underneath, or a separate line/shape, but then you'll have to adjust the animation for it.

[@FadeThePlayer]

@@DavidLindgren89 the animation is gonna be from left to right underline. I am looking for some tutorials that could help me out with that since I need it for a MOGRT in premiere. Do u know how to do it correctly?

[@mohamadkabso]

Can I switch the direction from left to right?

[@DavidLindgren89]

Just opened After Effects to find a solution to this and I found one 🙂 Turn the rectangle upside down (by setting the rotation to 180 degrees) and it will now grow in the opposite direction. You can find that property here: Shape Layer > Content > Rectangle > Transform > Rotation (Doesn't work for multiple rows though, only one row, since it's upside down) Hope that helped! :)

[@mohamadkabso]

@@DavidLindgren89 Well done, thank you very much

[@DavidLindgren89]

How to create responsive textbox with right-aligned text #Shorts

[@eforce2738]

please how to change the opacity of the bg of the text box

[@DavidLindgren89]

I believe you you just have to click T when having that layer selected, and it will show you the Opacity property. There you can change it. (Make sure it’s the opacity inside the actual shape.) Hope that helped!

[@eforce2738]

@@DavidLindgren89 but this method changes the opacity of the text+ the box < I want to change only the bg of the the text

[@DavidLindgren89]

@@eforce2738 Not sure if I understand.. Not the text-color but the color behind the text?

[@DavidLindgren89]

Aah, maybe I understand now. The thing is that with this method, the stroke is so thick that it covers the background. If you change the background color and then decrease the width of the stroke to maybe 2-3px, you will see what I mean. Hope that helped! :)

[@Shwemy99]

how can I Animate this shape and text so it appears like the words are being written by a writing machine or being typed on the computer.

[@DavidLindgren89]

I actually did a tutorial on that earlier this year! 🙂 Check it out here: kzbin.info/www/bejne/j3q2YoV_irupq5Y

[@Shwemy99]

@@DavidLindgren89 Sorry I didn't notice 🙈 and thank you so much ✨

[@DavidLindgren89]

@@Shwemy99 No worries! Happy I can help! 😊

[@crowsa9750]

@@DavidLindgren89 Hello I animated it but the box is not being created as the text is being typed, but its just the full size from beginning and doesnt change

[@SriSankaraTVKannada]

hi how to creative cod x = s.sourceRectAtTime(time-s.inPoint,true).width;