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.
Get the Motion for the Web After Effects Project file.
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.
