Able to carry your textual content to life? Within the following tutorial, we'll information you thru the method of making eye-catching textual content animations utilizing Lottie, a strong and light-weight animation format.

You will discover ways to create a Lottie animation in After Results ranging from a vibrant comedian guide textual content impact made in Adobe Illustrator.

What you may study on this tutorial

• What's Lottie?
• What's a Lottie file?
• Methods to make a Lottie animation
• Methods to save utilizing the Lottie file format

What you may want

You will want the next useful resource with a purpose to full this animated textual content:

What's Lottie?

Earlier than we start, a few of you is perhaps questioning, what's Lottie or what's a Lottie file? To be concise, Lottie is a small animated file that works on any system and might scale up or down with out pixelation. It's made completely out of code and could be very small in contrast with PNG or GIF information.

1. Methods to put together textual content in Illustrator earlier than turning it right into a textual content animation in After Results

Step 1

We'll begin with this Comedian E-book Textual content impact. Create your individual design and take away the background shapes together with the smaller sparks and the comb paths that lie on prime of the textual content.

Step 2

Choose all of the remaining objects and switch all of them into vector paths. Go to Object > Increase Look to broaden the strokes and the results, after which go to Sort > Create Outlines to show the textual content sections into vector shapes.

Step 3

Have a better take a look at your design and ensure that every little thing is now vector. Concentrate on the teams that make up the textual content and switch every group of shapes right into a single compound path (Object > Compound Path > Make or Management-8).

Step 4

Now comes the extra tedious half. You will have so as to add a layer for every form out of your design, as proven within the following picture. When you're finished, save the file, and we will transfer to After Results and study the way to make animated textual content.

2. Methods to arrange a composition in After Results to create Lottie animations

Step 1

Open After Results and go to File > Import > File... (Management-I). Choose Composition and Layer Dimension from the drop-down menus and click on OK.

Step 2

Within the Venture panel, yow will discover the auto-generated composition together with a folder containing all of the vector shapes. Double-click the composition to open it within the Timeline panel.

Step 3

Let's begin by adjusting the size of the work space to just one second (24 frames). Merely click on and drag that finish level. This fashion, we are going to solely loop this one second when previewing the animated textual content.

Step 4

Subsequent, we have to flip these Illustrator vector paths into After Results vector paths. Click on your Timeline panel to ensure that it is lively, and press Management-A to pick out all of the Illustrator information. Proper-click certainly one of these information and go to Create > Create Shapes from Vector Layer. Press Shift-Management-] to carry the newly created vector paths on prime of the prevailing ones.

Step 5

Make it possible for the Timeline panel remains to be lively, and press the ~ key to maximise this one panel. You will not want the Illustrator vector paths, so choose all of them and take away them. When you're finished, you possibly can press that ~ key once more to return to the unique panel structure.

Step 6

To simplify the Timeline panel , let's cover the Dad or mum & Hyperlink characteristic as we can't want it all through this tutorial. Merely right-click it and go to Disguise This.

Step 7

Additionally, to maintain issues organized and simpler to seek out, let's assign some colours to the elements from the Timeline panel.

3. Methods to animate the principle spark layers out of your Lottie animation

Step 1

Now that every one our information are set, let's begin on the textual content animation.

Choose "MAIN SPARK BLACK" out of your Timeline and press the S key to carry up the Scale settings. Make it possible for the playhead is at first, decrease the Scale worth to 0%, after which click on that Scale button so as to add the primary keyframe.

Step 2

Transfer the playhead to 03 frames and enhance the Scale to 100%, which is able to robotically add the second keyframe.

Step 3

Transfer the playhead to 08 frames and enhance the Scale to 105% so as to add the third keyframe.

Step 4

Transfer the playhead to 13 frames and decrease the Scale again to 100% to generate the ultimate keyframe. Now you possibly can press the Area bar to play your animated spark.

Step 5

To shine the animation, let's add a simple ease impact. Proper-click that Scale transformation and go to Keyframe Assistant > Straightforward Ease or use the F9 keyboard shortcut.

This is how your animation ought to look with the remainder of the layers invisible.

Step 6

Choose the Scale transformation utilized to "MAIN SPARK BLACK" and press Management-C to repeat it. Transfer to "MAIN SPARK RED", choose it and press S to carry up the Scale. Transfer the playhead to 03f and easily press Management-V to stick the copied animation.

Step 7

Once more, choose "MAIN SPARK YELLOW" and press the S key, after which transfer the playhead to 06f and press Management-V.

Step 8

Choose all three "MAIN SPARK" layers and press the U key to simply cover the Scale settings.

4. Methods to animate the textual content layers out of your Lottie animation

Step 1

Choose "TEXT 01", activate the Scale and hold it at 100%, after which add the primary keyframe proper at first. Transfer to playhead to 02f and enhance the Scale to 105% so as to add the second keyframe.

Step 2

Transfer the playhead to 04f and decrease the Scale to 100% so as to add the third keyframe. Transfer the playhead to 10f and enhance the Scale to 105% so as to add the fourth keyframe. Proceed to 16f and decrease the Scale again to 100%, after which bounce to 20f and enhance the Scale to 105%. Lastly, drag the playhead to 24f/00f and produce the Scale worth again to 100%.

Step 3

Once more, apply Straightforward Ease to this Scale transformation. Merely click on it and press F9.

This is how your animation ought to look with the remainder of the layers invisible.

Step 4

Copy the Scale transformation from "TEXT 01" and paste the settings onto "TEXT 02". Make it possible for the playhead is positioned at 00f earlier than you paste the settings.

Step 5

Concentrate on "TEXT 02", and let's make some small changes to the Scale transformation. Transfer the playhead to 02f, enhance the Scale to 110%, after which transfer the playhead to 10f and make the identical change.

Step 6

Copy the Scale transformation from "TEXT 01" and paste the settings onto "TEXT 03" whereas ensuring that the playhead is positioned at 00f.

Step 7

Copy the Scale transformation from "TEXT 02" and paste the settings onto "TEXT 04" and "TEXT 05".

When you're finished, choose all of your "TEXT" layers and press U to cover the Scale settings.

5. Methods to animate the lengthy spark layers out of your Lottie animation

Step 1

Let's transfer to the "LONG SPARK 01" layer. First, let's flip off the visibility of the remainder of the layers so we will higher concentrate on this animation. You'll be able to simply do that utilizing the tiny eye icons on the left-hand facet of every layer.

When you're finished, choose the "LONG SPARK 01" layer and press the P key to carry up the Place transformation. Drag the playhead to 07f after which click on the Place button so as to add the primary keyframe.

Transfer the playhead to 02f and decide the Choice Software (V). Concentrate on the Composition panel and easily drag your object roughly to the middle of the composition. It will robotically add the second keyframe. Choose this Place transformation and press F9 so as to add the Straightforward Ease.

This is how your animation ought to look with the remainder of the layers hidden.

Step 2

Hold the "LONG SPARK 01" layer chosen and press the T key to carry up the Opacity transformation. Drag the playhead to 00f, decrease the Opacity to 0%, after which click on that Opacity button so as to add the primary keyframe.

Transfer the playhead to 04f and enhance the Opacity again to 100%, which is able to add the second keyframe. Choose this Opacity transformation and press F9 to use the Straightforward Ease.

This is how your animation ought to look with the remainder of the layers hidden.

Step 3

Make it possible for the "LONG SPARK 01" layer remains to be chosen and press the S key. Transfer the playhead to 08f and click on the Scale button so as to add the primary keyframe. Drag the playhead to 10f and enhance the Scale to 120% so as to add the second keyframe. Proceed to 12f and decrease the Scale again to 100%, after which bounce to 18f and enhance the Scale to 140%. Lastly, drag the playhead to 24f/00f and produce the Scale worth again to 100%. When you're finished, bear in mind so as to add the Straightforward Ease (F9).

This is how your animation ought to look with the remainder of the layers hidden.

Step 4

Choose the opposite "LONG SPARK" layers one after the other and apply Place transformations much like the one which we used for "LONG SPARK 01".

The primary keyframe ought to be at 07f with the unique place of the layer, whereas the second keyframe ought to be at 02f with the layer positioned roughly within the middle of the composition. Do not forget in regards to the Straightforward Ease.

This is how your animation ought to look with the remainder of the layers hidden.

Step 5

Copy the Scale and Opacity settings that we used for "LONG SPARK 01". Transfer the playhead to 00f, choose the opposite "LONG SPARK" layers (02 to 13), and paste the copied settings.

This is how your animation ought to look with the remainder of the layers hidden.

6. Methods to animate the star layers out of your Lottie animation

Step 1

Let's transfer to "STAR 01" layer. Choose it and press the T key to carry up the Opacity transformation. Drag the playhead to 00f and decrease the Opacity to 0%, after which click on that Opacity button so as to add the primary keyframe.

Transfer the playhead to 09f and enhance the Opacity again to 100%, which is able to add the second keyframe. Additionally apply the Straightforward Ease.

This is how your animation ought to look with the remainder of the layers hidden.

Step 2

Make it possible for the "STAR 01" layer remains to be chosen and press the S key. Transfer the playhead to 03f and click on the Scale button so as to add the primary keyframe. Drag the playhead to 09f and enhance the Scale to 130% so as to add the second keyframe. Proceed to 15f and decrease the Scale again to 100%. Then bounce to 18f and enhance the Scale to solely 110%, earlier than going to 21f and bringing the Scale again to 100%. Lastly, drag the playhead to 24f/00f and lift the Scale worth to 110%. When you're finished, do not forget so as to add the Straightforward Ease (F9).

This is how your animation ought to look with the remainder of the layers hidden.

Step 3

Deliver the playhead at first, after which copy (Management-C) the Scale and Opacity settings out of your "STAR 01" layer. Choose the opposite "STAR" layers (02 to 09) and paste the copied settings.

This is how your animation ought to look with the remainder of the layers hidden.

Step 4

Earlier than we proceed, let's make a small adjustment to "STAR 08" and "STAR 09". Transfer the playhead to 09f and enhance the Scale for these two layers from 130% to 150%.

This is how your animation ought to look with the remainder of the layers hidden.

Step 5

Utilizing the Rectangle Software (Q), create a form that covers your total composition. Fill it with white and press Shift-Management-[ to send it to the back, behind the rest of your animated text.

7. How to export using Lottie file format

Step 1

First of all, open Creative Cloud and go to the Stock & Marketplace section. Search for Bodymoving and then LottieFiles, and install both of these plugins.

Step 2

Once you've installed the Bodymovin plugin, go to Window > Extensions > Bodymovin.

Click the Settings button, check the Demo box, and click Save. Remember to set the Destination Folder for your save, and then click that Render button.

Step 3

Once you've installed the Lottie Files plugin, go to Window > Extensions > LottieFiles. First, you'll have to create an account.

Select the composition that you wish to save, and click the Render button to preview your Lottie. If you're happy with it, click the Save to downloads button. You can save up to 10 Lottie animations for free. For more, you'll have to pay.

Congratulations! You're done!

Here is how your Lottie animation should look. I hope you've enjoyed this tutorial, and now that you've learned how to create a Lottie animation, you can apply these techniques to create more animations.

Feel free to adjust the final text animation and make it your own. You can find some great sources of inspiration at Envato, with interesting takes on how to make animated text.

Popular Lottie animations from Envato

Envato is an excellent resource for Lottie animations. Here's a short list of some of the most popular assets that come in the Lottie file format.

404 Error Lottie animation

Cut the hassle of learning how to make a Lottie animation and try these 404 error Lottie animations. Perfect for websites, apps, and digital experiences, this pack offers smooth, customizable animations that load quickly without slowing down your site.

Flat isometric graphic elements: Lottie edition

If you're in a hurry or you simply can't be bothered to learn how to make a Lottie animation, then this collection of sleek and modern animations will help. They're perfect for websites, apps, and presentations.

Fast food Lottie icons

Don't have the time to learn how to create a Lottie animation? You can always use this animated icon pack that features smooth and fully customizable illustrations of burgers, fries, sushi, donuts, and more.

Arrows Lottie files

Save the time that you would have spent learning how to make a Lottie animation, and use this collection of sleek, animated arrows designed for websites, apps, and UI elements.

Location Lottie titles

Featuring animated text combined with smooth graphics, this pack is perfect for maps, travel apps, contact pages, and navigation UIs.

Want to learn more?

We have loads of tutorials on Envato Tuts+, from beginner to intermediate level. Take a look!