Motion has an important role to play in digital products – when it’s used with intent. At Storm, we have included animations to support clarity, guide users, and add a sense of polish without compromising performance. One of the tools that helps us do this effectively is Lottie.
Using Lottie files allow us to bring high-quality animation into websites and applications in a way that’s lightweight, flexible and consistent across platforms. In this post, I’ll explain how we use Lottie at Storm, and why it’s become part of our design workflow.
What is a Lottie animation?
Lottie is a JSON-based animation format that renders vector animations in real time across web and mobile platforms. In plain English: it’s lightweight code that plays back motion exactly how it was designed, no matter where it’s used.
Unlike GIFs or video files:
- It scales perfectly on any screen size with no loss of quality
- It loads fast because the files are tiny, often just a few kilobytes.
- It plays natively on iOS, Android and desktop browsers without awkward fallbacks.
How we create Lottie files
Our Lottie animations start life in Adobe After Effects, where we have full creative control over timing, easing and visual detail. This gives us the freedom to design motion in the same considered way we design interfaces, aligning animation with brand styles, and user needs.
Once an animation is ready, we export it using BodyMovin, an After Effects plugin that converts animations into Lottie’s JSON format. This process preserves the fidelity of the original animation while producing a file that’s small, scalable and ready for use on the web or in apps.
Because the animation is data-driven rather than video-based, it can be rendered natively by the browser or app, without the overhead you’d expect from GIFs or MP4s.
Don’t overdo it!
At Storm, we tend to use animations in places where motion genuinely adds value, such as:
- Interface feedback, like loading states or confirmation messages
- Micro-interactions, helping users understand what’s happening
- Illustrative animations, supporting content or explaining concepts
- Subtle brand moments, reinforcing tone without distraction
We’re careful not to overuse animation. If motion doesn’t improve understanding or usability, it doesn’t earn its place.
Sam’s Summary
Lottie has become a valuable part of how we design and build digital experiences at Storm. It allows us to introduce motion that’s lightweight, flexible and consistent, without compromising on performance or maintainability.
Used carefully, Lottie animations help digital products feel more responsive, more human, and easier to use. And that’s exactly what we aim for in every project we deliver.
