FASTEST Way To Animate Text For Lottie Animations

hey geniuses in this video i'm going to show you how you can get some really easy and good looking text animations using the lottie files svg to lottie converter and then we're going to tweak it a little bit in after effects afterwards but it's pretty simple stuff let's get started so we're going to start off in illustrator and we're going to be adding some text to animate so let's create a text layer um lauren ipsum why not foreign ibsen okay let's center that and bump up the font size let's do 100. so i'm using a font called sign painter and i find that this lends itself quite well to the sort of trim path animation uh because it flows nicely so i'm going to keep that but this works with any font you want and what we want to do next is right click our text and click on create outlines so as you can see it creates all the different points um for our text and this is what we're going to be animating well we won't be autofilled would be animating this so before we get into lottie files we're going to remove the fill and just add a bit of a stroke color so we can actually see the letters and i'm just going to remove my guide layer and you should end up with something like this so once that's done you can go ahead and export all of this as an svg and then head over to default.com i'll see you over there okay so if you open up lotteval.com you can scroll down to the footer of the page and find svgtlotti once that page is open you can go ahead and import your svg image okay so here we go drop that and this is going to convert your svg to a lot animation so json file but you can also choose different presets uh to animate it with so you can check out the different um presets maybe some of those will suit your needs what i'm going to be using is these two trim puff animations so that's the first one and then the second one so that's a bit quicker i think and that's got a bit more easing to it i'm going to use this second preset and i'm going to upload it as a preview so that we can have an asset link which will be useful in after effects so we've done that let's now go over to after effects okay so in after effects we're going to open up body moving and import our lottie animation so just grab the asset link paste it here import from url shouldn't take too long because these animations are quite small and as i said this is a workaround so you don't have to animate text by hand um and so what we're going to do here is open up the keyframes and as you can see it's animating the trim path so i'm just going to cut the comp at 140 and open it up open up surface and then i'm going to add a fill to it and then make it black there we go and if you just do that you'll see it doesn't look very good it's just glitching out a bit so i'm going to actually animate the opacity on this so that it will appear once the trim pass segment has finished so i'm just going to quickly just do a 0 to 100 on the opacity of the fill and that'll actually make the animation look quite nice and usable so let's have a look okay that's coming in a bit too late let's try around 50. okay just a bit earlier perhaps okay that's looking good i could even just do 35 perhaps okay i think it's actually looking pretty good at 40. so once that's done that's all that's needed really is just animate the feel and its opacity and we've got a nice looking trim puffed text animation so once that's done you can go ahead and use the lottie files plugin and upload it to your previews and then get it into your web pages and apps so let's just have a quick look as a lottie there we go that's we've just very quickly in just under five minutes i think um got our text animation as a lotte so definitely check out lots of us.com and the svg telotty tool it can save you some time if these presets suit your needs rather than doing it all in after effects but otherwise i hope this little trick helped you out and i will see you guys in the next one bye-bye i hope this video helped you out and if you did be sure to leave a like and subscribe to the svgs youtube channel to keep up to date with everything happening in the wonderful world of lottie animations [Music] you

Channel: SVGenius

Views: 1,037

Keywords: lottie, lottiefiles, animations, animation, 2danimation, after-effects, tutorials, guides, how-to, motion-design, web, mobile, code, programming

Id: XjYkx1VYBwk

Length: 6min 52sec (412 seconds)

Published: Sun Aug 01 2021