Back to Blog Index

Everything You Need To Know To Make Web/UI Animations With LottieFiles

In recent years, Motion Design and Animation have become a huge part of web and UI design. LottieFiles is a big part of that. Here’s how to get started.

If you’ve done much UI or web design in the last few years, chances are you’ve bumped into or considered using a lottie file. A lottie is a file-type that basically bridges the gap between what you’ve designed in After Effects and web or app-friendly code.

It’s a pretty astonishing new technology in a lot of ways, as it makes it just overwhelmingly possible to add some pretty hefty and eye-catching style to what you’re making on the web. It’s also allowed for all of us motion designers to start getting in on the growing and always evolving web and UI design side of the industry. 

As you can see, the possibilities are kind of astounding. The fact that you can just make animations the way that you always have in After Effects, and convert it directly into code, is just too exciting. 

Lottie’s have been around for a few years but they’ve really started picking up popularity more recently, and you’re probably seeing them on a daily basis without even knowing it. If you want to stay ahead of the curve, I recommend diving into making some lotties, and you’ll be really glad you did. 

Making The Animation In After Effects

Making lotties inside of After Effects is super easy. LottieFiles has even released a plugin/extension for AE that you can use to export and create your lottie files.

There are some best practices when it comes to what you can and can’t do in AE, in regards to what types of effects and animations will translate over to Lottie. For example, it’s really advisable not to mess with any effects from the effects menu. This stuff, more often than not, will fail to translate into web-friendly code. Stuff like curves effects, blurs, really anything that exceeds standard keyframe animation probably won’t work in Lottie. 

On the other hand, one thing that IS exciting that definitely does work is the speed graph. This means you can make some really smooth and modern looking animations with what you create. You can ease and customize bezier handles, and all of this stuff will translate to code.

Creating Designs For LottieFiles

The other thing to consider when creating your designs themselves is what types of shape layers and vector designs will translate as well. Sometimes, it’s a bit difficult to know for sure as you design, what stuff will work and what won’t. 

It’s my advice that if you’re creating things in After Effects, just use standard shape layers or solids with masks. If you have an illustrator file that you want to animate, that will work, but you’ll want to make sure that you bring everything over as paths or shape layers. Generally speaking, that will make sure that things are a bit more compatible as you animate. However, there are exceptions to that rule. 

For the most part, my workflow is to bring in a .AI or .eps or .svg file and import it as a composition. Then I select each of the layers in that composition and right-click and select “Create Shapes From Vector Layer”. This will keep things clean and you’ll feel pretty certain that you can do what you need to with your lottie file. 

Optimizing Your Lottie Files

Another great thing about Lottie is that it’s very easy to optimize and create smaller versions that will run faster for various platforms. This is useful because you might want to have different quality levels for different places, or you might find that your animation is just too heavy in general.

The thing about Lottie that is kind of crazy is that once you’ve exported it from After Effects, you’ll actually be able to find your Lottie on the LottieFiles website. On that site, you’ll be able to iterate and create different versions of your design directly through the web app. 

On the web app, you’ll be able to select between different compression levels for your needs, while also retaining the original version that you created. There are so many options available.

Everything That’s Possible

One thing that I find particularly mind-blowing about lottie files is that once they’re loaded up on the web app, you can change colors of each of your layers directly from your browser. So if you need to change to different brand colors, you can just swap any layer you want to whatever color you need. Not to mention you can pick from any of the designer curated color palettes they have as well. 

As time has passed, people have found lots of cool hacks and ways to use lotties, even with third-party-plugins that have worked around some of the limitations to allow you to create some truly stunning web animations.

I, for one, am very glad that motion designers now have access to the thriving web and UI design industry. It’s making all of our apps and web experiences so much more dynamic and fun, and it’s created an entire economy in the motion design space that was largely absent before. 

Dive into real-time 3D with our Unreal Engine beginner's course by Jonathan Winbush. Master importing assets, world-building, animation, and cinematic sequences to create stunning 3D renders in no time! Perfect for motion designers ready to level up.

Explore this Course

Unlock the secrets of character design in this dynamic course! Explore shape language, anatomy rules, and motifs to craft animation-ready characters. Gain drawing tips, hacks, and Procreate mastery (or any drawing app). Ideal for artists seeking to elevate their craft.

Explore this Course

Elevate your freelance motion design career with our guide to client success. Master a repeatable method for finding, contacting, and landing clients. Learn to identify prospects, nurture leads, and develop a thriving freelance philosophy amidst chaos.

Explore this Course

Rev up your editing skills with After Effects! Learn to use it for everyday needs and craft dynamic templates (Mogrts) for smarter teamwork. You'll master creating animated graphics, removing unwanted elements, tracking graphics, and making customizable templates.

Explore this Course

Stand out with Demo Reel Dash! Learn to spotlight your best work and market your unique brand of magic. By the end, you'll have a brand new demo reel and a custom campaign to showcase yourself to an audience aligned with your career goals.

Explore this Course

Illuminate your 3D skills with Lights, Camera, Render! Dive deep into advanced Cinema 4D techniques with David Ariew. Master core cinematography skills, gain valuable assets, and learn tools and best practices to create stunning work that wows clients.

Explore this Course

Master After Effects at your own pace with Jake Bartlett's beginner course. Perfect for video editors, you'll learn to create stylish animated graphics, remove unwanted elements, and track graphics into shots. By the end, you'll be equipped for everyday AE needs and more.

Explore this Course

Revolutionize your Premiere workflow with customizable AE templates! Master creating dynamic Motion Graphics Templates (Mogrts) in After Effects to speed up your team's work. By the end, you'll craft easily-customizable templates for seamless use in Premiere Pro.

Explore this Course
Free Ae Project File
Get the Motion for the Web After Effects Project file.
Your download is in your inbox!!!
Check your email (spam, too) for the download link!
Please check the spam folder if you don't see the message within a minute or two. Google likes to hide your downloads, sometimes.
Oops! Something went wrong while submitting the form.

Start Animating in After Effects

Animation Bootcamp teaches you the art of beautiful movement. In this course, you'll learn the principles behind great animation, and how to apply them in After Effects. By the end of this course, you'll have multiple animated videos, created with professional assets and guidance that can be added to your portfolio.

Cover image via LottieFiles.