June 16, 2021

How to Create Lottie Files in After Effects

Share this

When designing your website, you often are restricted with the amount of control you have when adding animations. Sometimes the simple fade, slide, or rotate won't cut it, maybe you want a little bit more. With the power of a Lottie, you can bring complex animations directly from After Effects and keyframe it to events on your website. Giving you complete control and creative freedom.

Before you Start

To create and export Lottie files you will need a few things:

1. Create your animation in After Effects

Create your animation in After Effects

Start by creating your animation in After Effects. By default, Lottie files will end on the last frame and won't automatically loop. Make sure the last couple of frames are what your final image should look like.


  • End the animation on your final frame.
  • Size your composition based on the use within the website

2. Export it as an Image Sequence

Export After Effects Animation as an Image Sequence

Once you have your animation made we need to export it as an image sequence.

Open Adobe Media Encoder and change the format to an image sequence of your choice. 

Export Lottie as a PNG Alpha

In this example we used PNG Sequence with Alpha

Make sure to create a separate folder as your output destination. Since it's an image sequence, the output will be one picture per 0.01 of a frame.

3. Create a New Composition with your Image Sequence

Create a New Composition with your Image Sequence

Take the image sequence you just exported and import back it into After Effects.

Highlight all of your images and create a new composition.

Set the frame duration to 0.01.

Setting Frames to 0.01

00:01 represents 1/30th of a frame based on a 30fps composition.

Once you create the composition, your animation should play the same speed as when you created it.

4. Export as a Lottie JSON

Export as a Lottie JSON

Make sure you have the LottieFiles plugin installed. 

Navigate to Windows -> Extension -> LottieFiles.

Find your composition and save it as a Lottie JSON.

Render times vary depending on your computer, but once its finished you will see it's saved as a JSON file.

Example of a Lottie File

5. Place on your website

Once you have your Lottie file exported, you can upload it to any website builder that supports the file. We've found that Webflow offers incredible support and flexibility for Lottie files. Check out our example site below to see it in action!

Example website using Lottie animation

Meet the Author

mike schmitz

Mike Schmitz is the Videographer and Motion Graphics Artist at AmpliPhi Social Media Strategies. Whether it's a small production or a custom animated video, Mike can work with you in creating the perfect piece of content to drive marketing campaigns or develop your online presence.

Mike graduated from Madison Media Institute’s Video Production program and is an FAA Part-107 UAS certified drone pilot. Before joining AmpliPhi he was a part of UW Madison's Video Production Team, a Wedding Videographer, and a freelance drone pilot.

Want to learn more? Visit our resource library with comprehensive guides and walkthroughs.

Includes PDFs, checklists, and everything you need to get started.

related posts:

Leave a Reply:

Your email address will not be published. Required fields are marked

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}