How to create a Lottie text animation

Ready to bring your text to life? In the following tutorial, we'll guide you through the process of creating eye-catching text animations using Lottie, a powerful and lightweight animation format.

You'll learn how to create a Lottie animation in After Effects starting from a vibrant comic book text effect made in Adobe Illustrator.

What you'll learn in this tutorial

What is Lottie?
What is a Lottie file?
How to make a Lottie animation
How to save using the Lottie file format

What you'll need

You'll need the following resource in order to complete this animated text:

Comic Book Text Effect design

What is Lottie?

Before we begin, some of you might be wondering, what is Lottie or what is a Lottie file? To be concise, Lottie is a small animated file that works on any device and can scale up or down without pixelation. It is made entirely out of code and is very small compared with PNG or GIF files.

1. How to prepare text in Illustrator before turning it into a text animation in After Effects

Step 1

We'll start with this Comic Book Text effect. Create your own design and remove the background shapes along with the smaller sparks and the brush paths that lie on top of the text.

Step 2

Select all the remaining objects and turn them all into vector paths. Go to Object > Expand Appearance to expand the strokes and the effects, and then go to Type > Create Outlines to turn the text sections into vector shapes.

comic book text effect expand text and effects

Step 3

Have a closer look at your design and make sure that everything is now vector. Focus on the groups that make up the text and turn each group of shapes into a single compound path (Object > Compound Path > Make or Control-8).

Step 4

Now comes the more tedious part. You'll have to add a layer for each shape from your design, as shown in the following image. Once you're done, save the file, and we can move to After Effects and learn how to make animated text.

add new layer for each shape in Illustrator

2. How to set up a composition in After Effects to create Lottie animations

Step 1

Open After Effects and go to File > Import > File... (Control-I). Select Composition and Layer Size from the drop-down menus and click OK.

Step 2

In the Project panel, you can find the auto-generated composition along with a folder containing all the vector shapes. Double-click the composition to open it in the Timeline panel.

Step 3

Let's start by adjusting the length of the work area to only 1 second (24 frames). Simply click and drag that end point. This way, we will only loop this one second when previewing the animated text.

Step 4

Next, we need to turn these Illustrator vector paths into After Effects vector paths. Click your Timeline panel to make sure that it's active, and press Control-A to select all the Illustrator files. Right-click one of these files and go to Create > Create Shapes from Vector Layer. Press Shift-Control-] to bring the newly created vector paths on top of the existing ones.

create shapes from vector layer in after effect

Step 5

Make sure that the Timeline panel is still active, and press the ~ key to maximize this one panel. You won't need the Illustrator vector paths, so select them all and remove them. Once you're done, you can press that ~ key again to return to the original panel layout.

Step 6

To simplify the Timeline panel , let's hide the Parent & Link feature as we won't need it throughout this tutorial. Simply right-click it and go to Hide This.

Step 7

Also, to keep things organized and easier to find, let's assign some colors to the components from the Timeline panel.

3. How to animate the main spark layers from your Lottie animation

Step 1

Now that all our files are set, let's start on the text animation.

Select "MAIN SPARK BLACK" from your Timeline and press the S key to bring up the Scale settings. Make sure that the playhead is at the start, lower the Scale value to 0%, and then click that Scale button to add the first keyframe.

Step 2

Move the playhead to 03 frames and increase the Scale to 100%, which will automatically add the second keyframe.

move playhead and add second scale keyframe

Step 3

Move the playhead to 08 frames and increase the Scale to 105% to add the third keyframe.

Step 4

Move the playhead to 13 frames and lower the Scale back to 100% to generate the final keyframe. Now you can press the Space bar to play your animated spark.

Step 5

To polish the animation, let's add an easy ease effect. Right-click that Scale transformation and go to Keyframe Assistant > Easy Ease or use the F9 keyboard shortcut.

Here's how your animation should look with the rest of the layers invisible.

Step 6

Select the Scale transformation applied to "MAIN SPARK BLACK" and press Control-C to copy it. Move to "MAIN SPARK RED", select it and press S to bring up the Scale. Move the playhead to 03f and simply press Control-V to paste the copied animation.

Step 7

Again, select "MAIN SPARK YELLOW" and press the S key, and then move the playhead to 06f and press Control-V.

Step 8

Select all three "MAIN SPARK" layers and press the U key to easily hide the Scale settings.

4. How to animate the text layers from your Lottie animation

Step 1

Select "TEXT 01", activate the Scale and keep it at 100%, and then add the first keyframe right at the start. Move to playhead to 02f and increase the Scale to 105% to add the second keyframe.

Step 2

Move the playhead to 04f and lower the Scale to 100% to add the third keyframe. Move the playhead to 10f and increase the Scale to 105% to add the fourth keyframe. Continue to 16f and lower the Scale back to 100%, and then jump to 20f and increase the Scale to 105%. Finally, drag the playhead to 24f/00f and bring the Scale value back to 100%.

Step 3

Again, apply Easy Ease to this Scale transformation. Simply click it and press F9.

Here's how your animation should look with the rest of the layers invisible.

Step 4

Copy the Scale transformation from "TEXT 01" and paste the settings onto "TEXT 02". Make sure that the playhead is placed at 00f before you paste the settings.

Step 5

Focus on "TEXT 02", and let's make some small adjustments to the Scale transformation. Move the playhead to 02f, increase the Scale to 110%, and then move the playhead to 10f and make the same change.

Step 6

Copy the Scale transformation from "TEXT 01" and paste the settings onto "TEXT 03" while making sure that the playhead is placed at 00f.

Step 7

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

Once you're done, select all your "TEXT" layers and press U to hide the Scale settings.

5. How to animate the long spark layers from your Lottie animation

Step 1

Let's move to the "LONG SPARK 01" layer. First, let's turn off the visibility of the rest of the layers so we can better focus on this animation. You can easily do this using the tiny eye icons on the left-hand side of each layer.

Once you're done, select the "LONG SPARK 01" layer and press the P key to bring up the Position transformation. Drag the playhead to 07f and then click the Position button to add the first keyframe.

Move the playhead to 02f and pick the Selection Tool (V). Focus on the Composition panel and simply drag your object roughly to the center of the composition. This will automatically add the second keyframe. Select this Position transformation and press F9 to add the Easy Ease.

Here's how your animation should look with the rest of the layers hidden.

Step 2

Keep the "LONG SPARK 01" layer selected and press the T key to bring up the Opacity transformation. Drag the playhead to 00f, lower the Opacity to 0%, and then click that Opacity button to add the first keyframe.

Move the playhead to 04f and increase the Opacity back to 100%, which will add the second keyframe. Select this Opacity transformation and press F9 to apply the Easy Ease.

Here's how your animation should look with the rest of the layers hidden.

Step 3

Make sure that the "LONG SPARK 01" layer is still selected and press the S key. Move the playhead to 08f and click the Scale button to add the first keyframe. Drag the playhead to 10f and increase the Scale to 120% to add the second keyframe. Continue to 12f and lower the Scale back to 100%, and then jump to 18f and increase the Scale to 140%. Finally, drag the playhead to 24f/00f and bring the Scale value back to 100%. Once you're done, remember to add the Easy Ease (F9).

Here's how your animation should look with the rest of the layers hidden.

Step 4

Select the other "LONG SPARK" layers one by one and apply Position transformations similar to the one that we used for "LONG SPARK 01".

The first keyframe should be at 07f with the original position of the layer, while the second keyframe should be at 02f with the layer positioned roughly in the center of the composition. Don't forget about the Easy Ease.

Here's how your animation should look with the rest of the layers hidden.

Step 5

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

copy and paste scale and opacity settings

Here's how your animation should look with the rest of the layers hidden.

6. How to animate the star layers from your Lottie animation

Step 1

Let's move to "STAR 01" layer. Select it and press the T key to bring up the Opacity transformation. Drag the playhead to 00f and lower the Opacity to 0%, and then click that Opacity button to add the first keyframe.

Move the playhead to 09f and increase the Opacity back to 100%, which will add the second keyframe. Also apply the Easy Ease.

Here's how your animation should look with the rest of the layers hidden.

Step 2

Make sure that the "STAR 01" layer is still selected and press the S key. Move the playhead to 03f and click the Scale button to add the first keyframe. Drag the playhead to 09f and increase the Scale to 130% to add the second keyframe. Continue to 15f and lower the Scale back to 100%. Then jump to 18f and increase the Scale to only 110%, before going to 21f and bringing the Scale back to 100%. Finally, drag the playhead to 24f/00f and raise the Scale value to 110%. Once you're done, don't forget to add the Easy Ease (F9).

Here's how your animation should look with the rest of the layers hidden.

Step 3

Bring the playhead at the start, and then copy (Control-C) the Scale and Opacity settings from your "STAR 01" layer. Select the other "STAR" layers (02 to 09) and paste the copied settings.

Here's how your animation should look with the rest of the layers hidden.

Step 4

Before we continue, let's make a small adjustment to "STAR 08" and "STAR 09". Move the playhead to 09f and increase the Scale for these two layers from 130% to 150%.

Here's how your animation should look with the rest of the layers hidden.

Step 5

Using the Rectangle Tool (Q), create a shape that covers your entire composition. Fill it with white and press Shift-Control-[ 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.

install bodymovin and lottiefiles 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.