How to Create Lottie Files Using After Effects

30/11/2021
blog

Consider this: You go to a webpage and see beautiful animations pop up to make your experience more interactive and engaging. After this, you visit another webpage. Although it’s well made, it either involves pixelated animations or the same boring old static images. Which company would you be inclined to buy from?

You have your answer.

Animations grab people’s attention in less than 1/10th of a second. Once you have their attention, you can direct them towards the checkout relatively easily. And this is where the Lottie file format comes into play.

What are LottieFiles?

LottieFile is an animation file format that you can easily ship to any platform. It requires very little disk space compared to PNG and GIF (consider a puppy in front of a T-REX) as they are stored as plain text. The best thing, however, is the resolution of Lottie files. Since these files are rendered at the native resolution of the screen, you will never see a pixelated animation. Every time a user zooms in on the animation, the play redraws the content at the new resolution.

This better be getting you excited to learn more about Lottie because, in this blog post, we intend to teach you how to create Lottie Files using After Effects!

So let’s begin shall, we?

1. Take a look at the Lottie Files Documentation.

Not all the animation features supported by Adobe After Effects are supported by LottieFiles. So, instead of learning the hard way where half of your animation is refusing to run, it’s better to go through the documentation first.

To do that, simply type https://airbnb.io/lottie/#/supported-features in the search bar. A page like this should open up:

You will find that some of the features are specific to the platform you are using. For example, After Effects support polystar for both Android and IOS but not for Windows. Keep this piece of the document opened up while you work on your project to avoid using unsupported shapes, layers, masks and texts.

2. Install the Bodymovin Plugin

Since you are already on the required page, let’s get done with this step too. On the airbnb.io page, you will see a menu on the left side. Choose ‘After Effects’ from that menu, and you will find documentation explaining how to install the Bodymovin plugin. Follow the instructions to get done with the preliminary work before starting your animations.

At this point, you might be wondering what this plugin is good for.

Bodymovin is an extension that lets designers export their animation from After Effects in the .json file format. Using this file format, designers can easily embed their files into websites, add them to their apps and send them as part of their emails.

If you do not want to use a third-party extension, you will find a plugin created by LottieFiles on the same page, known as ‘LottieFiles for After Effects’.  Click on the link, and you should jump from airbnb.io to lottiefiles.com.

  • Download the plugin to your computer.
image3-create lottie files using after effects
  • In addition, download Anastasy’s Extension Manager so you can load the plugin in After Effects.
  • Open the extension manager inside After Effects to see a list of Adobe software present on your computer.
  • In the Adobe Products menu on the left, choose After Effects and drag the plugin inside that window.
  • Wait for the installation to complete, then restart Adobe After Effects. Your plugin should be present in the extension menu.

3. Create the Illustration You Want to Animate

You cannot animate a blank page. You need an illustration, to begin with; this you can do in Adobe Illustrator.

Create separate layers for your animation illustration. For instance, while animating an envelope, you can have a separate layer for the paper inside, the front flap, the back cover, etc. Having a proper layer order and specific names for each layer can save a lot of your time once you begin animating the illustration.

Once you are done with the illustration, save it in the .ai file format and import it into After Effects. Make sure you choose Retain Layer so the layers can stay separated, allowing you to animate them one by one.

You should now see your illustration layers inside the After Effects window. Select them all at once, right-click twice and choose ‘Create Shapes from Vector Layer’ from the Create drop-down menu.  A new set of layers having a star icon beside them should appear.

4. Creating Lottie Animations

You are now ready to begin creating animations. But first, create a new composition in After Effects. At this point, it is essential to note that since Lottie files are vectors, the size of the composition holds no meaning. Vectors are mathematical calculations, which means they don’t follow a specific size. They redefine their height, width and resolution according to the screen resolution.

image4-create lottie files using after effects

Copy your vector layers into your composition. You might find a messed up version of your illustration after this step. Look at the layers, are they arranged correctly?  

If you are lucky, your answer will be no. Simply rearrange the layers to get your illustration back in shape and begin animating!

While creating Lottie animations, keep the following things in mind:

  • Avoid path keyframe animations unless they are necessary. They take up the most space and make JSON files very large.
  • After Effects can have whatever composition, but you must export it at 1x the size of your asset.
  • Lottie does not support expressions or anything from the effects menu.
  • Set the frame rate best for your purpose -60fps works best for mobile devices.
  • Lottie files only support 2D animations (position X/Y).
  • Try to keep your animations as simple as possible by using position, scale and rotate, etc.
  • Lottie files do not loop automatically, so your animation will end on the last frame.

5. Export Your Lottie Animation

Once you are done perfecting your animation, it’s time to export the JSON files. The Bodymovin plugin you installed at the beginning of this tutorial is about to come in very handy now.

Go to ‘Windows’ and choose the Bodymovin plugin from the Extension drop-down menu. You will find several saving options, including split, glyph, hidden, etc. Find more information here.

Select the composition you want to export along with the desired destination. Now all that’s left is to render the file.

Once the rendering process completes, you will be able to view how well your animation is working from the Preview option in the plugin.

You can also perform the same procedure using the LottieFiles Plugin. It has a gear icon for customisable settings and a right arrow icon for rendering the file. Once your file is rendered, you get two options: either save it to your desktop or upload it to your Lottie account.

Forgot to add a background to your Lottie animation?  You need not worry because the LottieFiles plugin lets you add background colours even after you have rendered your file. However, you will need to save or upload this file as a separate JSON file.

Users can also generate a QR code to view the animation on their phones using the LottieFiles mobile app. If the animation works smoothly on your phone, it should work perfectly in all other apps too. You can browse through various free animations present on the Lottie platform and use them for your projects using the explore icon.

6. Test Your LottieFiles on the Lottie Web player

Go to Lottiefiles.com and drag your JSON file directly to the browser to observe how well it works. You will also find several useful options on the screen, including a QR code, a private animation link and a Lottie animation URL.  

If you don’t have the JSON file on your device, there is a download option available. You can also publish this file for the entire world to see or expand it to view your animation more closely.

image5-create lottie files using after effects

Making the Most Out of Your Lottie Animations

You have your Lottie animations ready, now what?

Let us introduce you to a platform that lets you meet like-minded people, showcase your artwork and monetise your efforts –Vidalgo. Join our creative community of designers and artists from around the world to get the recognition you deserve.

But that’s not all:

You can find hundreds of customisable animations to fulfil your purpose. Have you decided to send an animated Hanukkah card to your family overseas? Or do you need a customisable Christmas greeting for your friends? Make custom solutions through our state-of-the-art Vidalgo editor.

Share the animation of your choice, copy the link or export to any format. Play, personalise and promote your digital artwork with Vidalgo today!

Other Posts

blog
Best Lottie Players, Plugins and Tools
30/04/2022
Lottie has revolutionized the world of animation. To give a very basic definition, Lottie is a file format specific for animations, much like GIF. Due to Lottie animations, users can now display high-quality animations without any problems, such as pixelation, large file size, or slow webpage loading speeds. A single Lottie file is many times […]
blog
Infographics Trends and Animated Infographics in 2022
23/04/2022
With the rise of social media usage, visual content is becoming more and more popular than mere texts. From informational videos to sending memes to your friends and family, visual content is what people love nowadays. A popular type of visual content is infographics- packed with information, made to be attractive to the audience. Want […]
blog
7 Best Lottie Marketplaces To Help With Your Projects
16/04/2022
The Internet has brought the world closer, and sharing information has become extremely easy in this day and age. Today, there are numerous methods that let you share information, from videos to text and infographics to images. One such method is the use of animations which gives lets you provide information in a highly expressive […]