Lottie animations are typically used for small interactions rather than page transitions, where you’d usually need to access the specific programming language’s animation capabilities. However, there’s a way to interact with Lottie animations based on scroll or tapping events, and sometimes you can even dynamically replace elements within the animation, like a user’s image.
For designers, there are two main ways to get started with Lottie animations. The easiest way is to find a pre-made animation that suits your needs using the LottieFiles library. The community has grown significantly, and there are now animations available for various common tasks, such as animated like buttons or switches. Alternatively, you can create your own animation from scratch, which may be more challenging but offers maximum customisation. This might be the only option if the animation is specifically required for a unique use case.
Let’s consider a common step during a login or sign-up flow that’s becoming increasingly prevalent: a magic link. I want to create the illusion that the actual email is being sent while the user is engaged in the animation. This allows time for the email to arrive, making it appear as if it’s happening in real time.
The process begins with sketching a few storyboards to visualise the animation’s development. I assess which elements need to be designed and clarify my overall vision. At this stage, I might also explore LottieFiles to see how others have approached similar animations.
To ease into using Lottie, I began by experimenting with a pre-made animation from LottieFiles to assess how seamlessly it integrates with an iOS application. I initiated a new project in Xcode, incorporated the Lottie package dependency, and included the animation file. Lottie offers two primary methods for adding animations to your project. The most common approach is to export your animations in JSON format and add those files to your project. Typically, JSON files are compact, so file size is usually not a concern although there are tools that offer additional compression options during export.
In recent years, there has been an option to upload your JSON file to LottieFiles and utilise a CDN to incorporate them into your projects. However, a free account limits the number of files you can upload. It's notable that while JSON was initially popular, a newer ".lottie" file format is gaining traction due to its even smaller size and ability to include embedded images. For my first project, I opted for a generic confetti animation, and I was able to get it up and running with just six lines of code! The only challenge I faced was adjusting the size to fit the entire screen while ignoring the iPhone's safe areas, but with a bit of tweaking, I achieved the desired look.
Next, I ventured into creating a custom animation. Previously, I relied on Adobe Illustrator and AfterEffects with the Bodymovin plugin for crafting animations. However, a new, more straightforward tool has emerged, making the process both easier and more cost-effective. After conceptualising how the animation should function, the design phase began in Figma where I crafted all the shapes and compositions. I then transferred the design to LottieLab, an online tool facilitating the creation and export of Lottie animations.
A crucial point to remember is that despite Lottie's cross-platform capabilities, some environments do not support certain effects. For example, drop shadows aren't supported on iOS and Windows, though they are on Android and Web. Before exporting, it's advisable to review the compatibility table - found on the LottieFiles website - to ensure your animation functions properly on your chosen platforms. Crafting the envelope's closing was particularly challenging. Given the lack of support for movements on the 3D plane, I had to get creative. I created the illusion of the envelope closing by scaling the y-axis to -100%, with the anchor at the bottom centre. The rapid movement gives the impression that the top of the envelope is rotating. Implementing it in Xcode was exceptionally straightforward, requiring the same lines of code.
As you can see now, there’s no excuse not to include motion in our user interfaces. The Lottie library has made it incredibly easier to elevate otherwise static interfaces, creating excitement and user delight. Above all, the gap between design and development has been almost completely eliminated, and with Figma’s ability to include Lottie animation in designs, it’s as easy as adding images to the page. Yes, the heavy lifting might fall on the designer’s shoulders, but even if custom animations can’t be justified, the LottieFiles online library offers a vast array of pre-made animations that can be customised to match the brand’s colours too. As I mentioned briefly earlier, if we want to take things to the next level, we can experiment with dynamically changing the contents of the animation based on user data—but that’s a project for another day! Let’s keep pushing the boundaries of creativity and user experience.
