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 […]

After Effects for Beginners: Getting Started with After Effects

30/11/2021
blog

Adobe After Effects is certainly a high quality program that can work with professionals.  But believe it or not, with just a few quick tips and tricks, After Effects can also be an efficient tool for beginners. Here’s some tips for getting started with Adobe After Effects.

Start small.

There’s no reason you have to be a champion of After Effects animation in a day.  Professionals have worked years with this program to get the results they want.  By making sure you set reasonable expectations for yourself, you’ll be more likely to stay committed.  A great goal for After Effects for Beginners is just to complete a project. Think less of the quality of the project, and make your primary goal simply to complete it.

Find or Make Content.

A key tip for After Effects for Beginners is to trust the name of the program.  After Effects is not where you will be creating your content.  After Effects is merely the program you’ll be using to put your ideas together cohesively.  If you don’t want to create your own video and photo content, there’s a lot of options online for stock photography and video.  Try Pexels if you’re looking to get out of this for free off the bat.  When you’re ready to move beyond After Effects for Beginners, you may eventually want to pay for stock photography and video from another company like Envato.  When you’re ready to make the move into higher quality content, you can even pay someone to provide this quality video or photo content.

Upload your media.

Once you open the program, you’ll want to drop in the content you’ll be working with into the Project window on the left side of the program. When you’re just starting out with After Effects for beginners, you may not need to manipulate a ton of files.  As you work your After Effects animation skills up, you may want to organize the files by type.  Many professionals separate out their media to help make the rest of the process a little smoother for them. Consider this an essential part of the process- like a painter getting out their paintbrushes and palette.  While you’re not creating anything just yet, After Effects for beginners means setting your set up for success just like a professional.

Make a composition.

While After Effects will let you add a lot of neat elements to your final project, the first step is to make sure you’re working with something.  You can add After Effects text animation or other special effects without first having your initial layer of video or photo content. Click “Create New Composition” and fill in the command prompt with your preferred information. You can enter a time here for how long you’d like your clip to last.

If you’d like your composition to last the specific length of one of your video clips, simply create the composition by right clicking the video in your panel.  This will automatically create a clip length the same as your original.  When you’re working on After Effects for beginners, it may be a good idea to just work with this way of doing it to keep your project scale something you can handle.

As soon as you begin working on  your new composition, you’ll see it pop up in your project panel. A great tip for After Effects for beginners is to make sure to rename your new composition so you can tell which is your original video content and which one is the active project you’re working on. When you start adding After Effects animation or even After Effects text animation to your project, you’ll be grateful it has a different name so you can tell your work apart.

Just like other Adobe products, and a lot of applications for photo editing, Adobe After Effects uses layers to create final compositions.  You’ll see that when you add additional photos or videos they will appear on the bottom timeline in a stacked formation.  Don’t fret if what you want to see isn’t on the composition screen.  Odds are your varied content is just layered up. 

One of the ways professionals use layers the most is by using masks.  When you’re looking at top ways to improve skills for After Effects for beginners, using these masks is one of them.  This is how many Youtube stars edit their picture-in-picture videos for gaming or other digital tutorials. You can even create some interesting amalgamations of a couple videos like seen in this clip:

When you’re learning something new, there will be times when it gets frustrating. When it does, it’s a great opportunity to get tools and inspiration from other artists!

Play around with other effects.

On the far right of your screen you’ll see other effects.  The truth is the extent of what you can do with After Effects is exhaustive.  After Effects text animation can provide captions and title screens.  Other After Effects animations can give special effect like qualities to even your most mundane content.  Playing around with these effects is the best way to learn to use this tool.

Remember that at the end of the day, using After Effects for beginners is still a creative process.  While you may be inclined to follow tutorials on YouTube, every professional animator has their own strategies and techniques they like best.  By playing around, you’ll develop your own creative approach to using After Effects animation.  Don’t feel compelled to have your content look identical to others.

Render your creation.

When you’re done playing around, make sure you save (and share!) your creation.  By saving your learning projects, you’ll be able to see how your projects develop in complexity over time.

Go to the “Composition” tab and find the “Render” option.  From here, you’ll be able to pick the quality of your video and the file type you’re looking to create.  If you’re using After Effects for beginners, try out a simple mp4 file.  This one will easily upload to YouTube or wherever you’d like to share your project.

Keep going.

After your first After Effects animation, just keep trying!  Watching more YouTube tutorials can help you with niche skills for just the type of project you want to create.  For example, if you’re interested in After Effects text animation, try looking up some videos just to help you with that.  You’ll be better able to learn the specifics of what you’re trying to do after you have some basic knowledge. When you’re ready for the next level challenge, check out this article on another feature of After Effects, motion tracking. And just keep creating.

If you like publishing in lottie format- which is great for quick load times on your website, we encourage you to read up more about that here.  Rendering new file types can be a challenge, so we at Vidalgo wanted to provide a clear tutorial on how to get you up and running with the efficiency of the lottie format in no time.

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 […]