Animating the Web: Lottie Files 101.

On 10 / 04 / 2025 / by Robin Vanvoorden

Discover the power of Lottie files for seamless web animation integration. Learn how to enhance user experience with lightweight, scalable animations that won't compromise page load times. From understanding supported features to mastering customization techniques, this guide covers everything you need to know about leveraging Lottie files effectively in your web design projects. Explore practical tips, resources, and examples to elevate your animations and create engaging websites effortlessly.

Lottie files are a popular format for adding animations to a website or app. they are small, scalable, and can be manipulated with code. They are created using Adobe After Effects and exported using a plugin called Bodymovin. The result is a JSON file that can be rendered natively in a wide variety of platforms. With Lottie files, you can create high-quality animations that enhance user experience without significantly impacting page load times.

For this exact reason Lottie files are great at adding that little bit of extra interaction magic to your designs. Whether it’s a logo animation on the loading page of your site, a micro-animation added to the active state of an icon or a full-blown page-scroll transition, Lottie files can do it and they can do it without wrecking your performance.

As for customisation: Thanks to the Adobe After Effects and the Bodymovin plugin you can create your own Lottie animations. Using all the familiar tools of After Effects you can make complex animations, but there are a few caveats. Before you start using all the fancy effect options, there is a list of supported options. Anything not on the list might give you trouble in the long run.

Another thing to keep in mind is that Lottie animations usually render vector based animations, meaning .svg paths. The Bodymovin plugin can also render out images and even video, but personally I wouldn’t recommend it. This will make your lottie files a lot larger, and you will lose some of the unique advantages that vector based animation has to offer. More specifically: scalability and customisability.

Scalability

Just like regular vectors, Lottie files can be scaled to any size without losing any quality. Images and videos (that will be turned into sequence of different images for every frame) however are embedded when exported. These files are rasterised and will become more pixelated on scaling up or be needlessly large when scaling down.

Customisability

There are a few ways to gain control over your animation and change aspects on the fly. One of them is css classes. Technically you could inspect the animation, start counting the paths inside the vector animation and find ways to target the specific path to apply stylistic changes. Thanks to the Bodymovin plugin you can just add classes to the paths inside of After Effects. This way you can just change the path’s styling inside your projects by targeting the class.

The SVGenius channel has a bunch of course material regarding Lottie files and ways to take them to the next level.

Lottie files are not a new invention. So why make this blog post, you might ask?

The answer is very simple. They are a great resource and, in my experience, underutilised. With their flexibility and high performance they can be the missing piece to take your project to the next level.

So take this knowledge with you for a next project and see where the experiments might lead.