Hey There Lottie, Let’s Go Party
5 examples of Lottie animations in under 1 hour
Written by Jordan Pease & Kenny Lopez
A couple months ago, our team was tasked with adding a tutorial to the app. The primary goal was to educate users (renters) about an interface redesign we had recently launched, and to help our most high-intent renters more easily connect with properties. After conducting countless user tests, Sketch mockups, and Flinto prototypes, we were ready to figure out how the heck we would implement the final animation across iOS, Android, and web. And that’s when it happened… one of our senior android developers uttered those fateful words opening up a whole new frontier for our product… “Why don’t we give Lottie a try.”
Like other small design teams stretched for resources, we always wanted to dive into Lottie as a way to create animations inside our app, but never seemed to find the time or energy. Animation can oftentimes find itself categorized in the “nice to have,” or “when we have time” bucket. Additionally, it can be difficult to get buy-in from key stakeholders as they tend to see it as stretching “out of scope”. The overhead of learning a new tool, and then refreshing our Adobe After Effects skills seemed daunting, when in reality, we could not have been more wrong.
Learning Lottie took no time at all. There are amazing resources out there to help you get started, from importing your Sketch art boards into After Effects to testing your animations before engineering hand-off. To be honest, the only real learning curve happens when you start animating in After Effects. Probably the largest benefit comes from the handoff process. Instead of detailed spec docs, prototypes, and countless back and forth with your engineers, you simply hand them a JSON file and voilà… you’re essentially done. The power to create pixel perfect animations is now fully in the hands of the designer.
Time, resources, or even the right skillset are no longer valid reasons to avoid adding animation to your app. It’s fast, easy, and can even be used to drive business value. Adding animation to your user experience doesn’t have to be some elaborate and complex undertaking. In fact, some of the most effective forms of animation are quite subtle. To show you just how simple it can be, here are 5 animations our team created, each under an hour, for multiple purposes ranging from user delight to driving core business metrics.
Animation Examples
Launching a redesign of your product’s core experience can create anxiety for your users. To combat this uneasiness, we decided to launch a tutorial that educated users on how to use the new experience. Rather than give our users something static, we really wanted the tutorial to be engaging and interactive. Not only did we want to include animation, we also wanted the users to interact with the animations using certain swipe and tap gestures. The result was a three-step tutorial that required the user to interact with the screen in order to move to the next step. In doing so, they triggered the next animation while also learning first hand how the new redesign worked. The tutorial ended up driving considerable user delight while also having significant business impact.
One of the delight touch points in our app is driven by what we call the super match screen. Users discover properties by swiping on cards that show a short summary of property information. When the user swipes to the right, we put it in their “maybe” list, and when they swipe up, we add it to their “love it” list. However, some properties are really good matches for the user. In this case, we want to let the user know they found a super match, and give them the ability to quickly reach out to the property. To make this moment feel extra special, we animated hearts behind a photo of the property. Rather than feeling like an annoying modal that interrupts their flow, it ends up being a celebratory moment in their rental journey.
Loading a lot of data can sometimes take time — especially if we think outside of our immediate surroundings of San Francisco where super fast internet connections are as easy to come by as electric scooters. Previously, when loading large amounts of data, or when a user was on a slower connection, we would just show them a blank white screen while they waited for their results to appear. While redesigning our matches page, we saw an opportunity to create a new loading animation that incorporated pops of color, icons that represent elements of apartment searching, and some tips at the bottom of the page to help renters navigate the site like a pro. Not only does this add joy to their wait, but it communicates the work we are doing behind the scenes to generate the best personalized results. Our hope is that in this micro-moment, we are able to continue to build trust with the renter that we will help them find a home they love.
Not all animations have to be complicated or intricate. A few months ago, we decided to redesign our native profile pages to be more inline with the rest of the app and to bring a bit of user delight to an otherwise bland screen. Our Brand Marketing designer had created really awesome illustrations for our SPARK Conference and I wanted to find a way to incorporate them into our product. As a static image, it added a bit of character (which everyone agreed was much needed), however to add that dash of delight, we used Lottie to perpetually rotate the sun. It’s a subtle animation for sure — but even the tiniest micro-interaction can make a user smile, and isn’t that what it’s all about?
The possibility of finding your new home can feel exhilarating, especially if you’ve been looking for quite some time. The process is often the same: put in your preferences, find some places that look good, send out a few messages, and hope to hear back 🤞. While this process may be similar across most apartment searching platforms, we wanted to bring the feeling someone has when they’ve finally found a place they like as they click that button on their screen. In our upcoming “message sent” screen, as soon as the user writes their message and hits the send button, it transforms and bursts with excitement to confirm that it’s been sent and to be on the lookout for a response. While this may seem like a complicated animation in comparison to the other examples, it still only took about 35 mins from design to implementation.
Conclusion
With all of this in mind, you may be asking yourself, “This is great, but where do I start?” In addition to explaining how we have used Lottie here at Apartment List, we want to provide you with some resources and tips that we found useful when using this tool for the first time.
What do you need to get started
- Sketch (for UI Design)
- AEUX for Sketch (for exporting sketch to AE)
- AEUX for AE (for importing sketch to AE)
- Body Movin (for exporting animations to JSON)
Create a new Sketch doc
If you are working in a big Sketch file, you should transfer the artboards you are using for the animation into a new Sketch document. This will eliminate errors and improve transfer time.
Group Layers
Groups don’t necessarily exist in AE, so it’s important that you group together all layers that make up a single animation. For instance, in the example of the rotating sun, the illustration was created in Adobe Illustrator and was comprised of multiple paths. Because the sun was the only component that I was planning on animating, I decided to group everything in the image except for the sun. When importing into After Effects, I only had two elements in the timeline which made the animation and layer management much easier.
Don’t use bitmaps
Try to avoid bitmaps. When you transfer bitmaps over from Sketch into AE, you’ll notice they get saved in a local folder for your AE file. By default, AEUX blows those images up to 4x, making them a very large file size. They also create a unique image for every instance of it in your artboards. If you absolutely have to use a bitmap, make sure to replace them in your AE file with 1x resolution, and create one image reference for each instance in the animation file.
AEUX 👉Sketch workflow
You’ll notice that the AEUX tool has options for flattening images, creating symbols from images, and detaching symbols. In order to correctly import your sketch layers into After Effects make sure you select your artboard, or all the layers on it, and choose all of those options.
AEUX 👉 After Effects workflow
Once you have sent your artboards to AE, open the AEUX extension in After Effects. Whether you are importing/building your sketch layers into a new comp, or an existing comp, make sure to choose the 1x multiplier, detect parametric shapes, and precomp groups. This will make your file much more organized when animating your objects.
Animation Compilation
Don’t over complicate your animations. The more layers you have in your Sketch artboard you bring into AE, the more latency you will receive in your final animation. Try flattening, and simplifying your designs before bringing them over.
Looping Animations
If your animation has a looping effect at some segment of it, you will need to export it as two different animations. One animation for the non-looping section, and one animation for the looping segment. The engineer can seamlessly stitch them together in the final result.
Other Helpful Resources
So, what are you waiting for! Try Lottie out on your next project and feel free to post your results in the comments below.
About the Authors
Jordan Pease is a Principle UX Designer at Apartment List. When he’s not busy helping renters find a home they love through beautiful product experiences, you can find him playing frisbee with his 🐶, Lady.
Kenny Lopez product designer @Apartment List 🏡/ San Francisco transplant 📍/ Caffeine addict ☕️ / travel enthusiast ✈️
