How to use Lottie animations effectively
A brief article on how we use Lottie to build delightful user journeys at Peak.
At Peak Brain Training, we are on a mission to make neuroscience fun.
We’ve built a large catalogue of games, all based on scientific research, to help train different cognitive skills. We’ve got over 40 games available, divided into 7 categories which challenge your memory, language, problem-solving and critical thinking.
Keeping games fun but effective is quite a challenge, but this is a challenge we love to take on. We want to keep on creating an exciting brain training journey for every user and help to keep their minds active. So we’re always on the lookout for tools that will help us maintain that balance and enhance the user experience.
When we heard of a tool that would help us integrate awesome animations into our native iOS and Android apps, we got really excited. Our design squad jumped at the opportunity to explore this tool further during one of our hackathons.
What is Lottie?
Lottie is a tool by Airbnb that allows you to export After effects (or other motion graphics tools) animations in JSON files that can be then rendered through web and mobile interfaces.
Lottie saves a huge amount of memory compared to PNG sequences. (Especially with the new Lottie 3.0)
JSON files save valuable memory space and that was one of the main selling points for us. Previously we’ve used PNG sequence to animate vectors. During our hackathon, we compared the sizes between the two formats and with no surprise, JSON files were way smaller than the PNG sequence. That was enough to get us started. We used Lottie with After Effects and the open source extension bodymovin (also provided by Airbnb). We’ve been using After effects previously so the transition for the design team was very smooth.
There are some shortcomings of bodymovin, in rendering the full power of After Effects but you can reference the supported features before starting animating here: https://airbnb.io/lottie/#/supported-features
Short Case Studies:
Examples of how we use Lottie in our app Peak.
Baby steps
In the first round of tests, we experimented with simple and short animations. The following example is a loading screen that serves as a transition to the game. This was early days Lottie so we didn’t manage to integrate that screen (2 years ago). The end result is a combination of UIView with Lottie (the lines).
Lottie has evolved massively for the last 2 years and now it’s possible to integrate the animation.
Tint the colour as you like in code
Lottie gives you the freedom to tint in code, so essentially you only need to export one colour (we prefer white) and then let developers do their magic and generate the required colour.
It is especially useful for us as we have 7 categories each of which have a dedicated colour. Let’s say you are playing a game in category language, the colour assigned to language games would be purple, hence everything related to the journey is creating a visual cue through shades of purple.
Teenage Steps
After we found out Lottie serves our needs, we thought it would be a good idea to replace some of our PNG sequences with it. Below is our Daily Summary, which you get when you finish a workout. As a user, you train with Daily Workouts and we want to make the end experience as rewarding as possible. The following is a combination of Lottie checkmark animation and engineering work.
Adult Steps
Using Lottie to reward the user
At the time we introduced a new achievements system accompanied by beautiful illustrations. Since this was a new feature we took the opportunity to build from scratch and experiment with Lottie. Achievements are used as rewards for something accomplished in our app. To make the experience even more rewarding we decided to add animations to it.
Try to experiment with Lottie on new features and projects, it makes it easier if you think animation wise since the beginning of it.
Mix & Match
We’ve animated each element (eg numbers, rank icon..) and developers combined elements on the screen depending on the game results.
For example, if you have a score of 4259 and you have unlocked achievement but you haven’t ranked up, you will get a combination of the elements that are relevant to you.
Below is an example of animated digits: developers only had to pull in the ones necessary to build up the score. This allowed us to have different combinations and flexibility on personalising the screen to each user.
Micro Interactions
Animations are an essential part of bringing delight to the user interactions in our app. It adds value to the feature. Bottom navigation is one of the most used components, so we decided to add a small interaction on the active state of each.
Marketing Campaigns
Naturally, when the marketing team heard that we are able to easily integrate animations in the product, was super excited to start experimenting with different creatives to drive conversion on their discounts. We’ve ran AB test discount offers with static image versus animated, and the results were in favour of the animated creative.
Integration with third-party CRM tool — Braze
Braze is a platform our Growth team uses to communicate to customers across channels like push, email, in-app, and more. Previously, we have exported gif animations to communicate different messaging and that has proven to be successful but also cost us a lot of time and care to create. Gifs are great to use on your presentation, however, if you are striving for quality and complexity they are not the best solution.
As our app is localised in 14 languages, we also had to translate each language and export it into a gif. We end up with 14 files exported and compressed individually which is time-consuming. Plus the CTA was generated through Braze and was not in line with our guidelines at all.
After we’ve experimented integrating Lottie with Braze together with the Growth Team (+ thorough QA), we launched officially our new look for the in-app messages. We are very happy with the results because integration with Lottie gives us the flexibility to style the in-app messages and create consistency across the product.
Saving tons of time on localisation but work wisely!
If saving time is your priority then copy should not be part of the animation. Let developers handle it.
We managed to save tons of time thanks to Lottie, allowing us to keep copy dynamic while still having animation. However, we still face challenges when we want to animate the text itself. Below is an example of a 2018 Cyber Monday campaign where we animated the copy as well. That meant that we had to translate and animate in several languages. (Not so bad as Cyber Monday is called “Cyber Monday” in most non-English speaking countries.)
Building experience around our special winter themed game
Below is an example of one of our most famous word games (Word Hunt), where we have exchanged some of the key assets to create a winter theme. As a player you need to collect 12 golden words, which if successfully collected gives you a Lottie animation of that word being stored in a box (example below).
Layer over several animations
For the purposes of this experience, we have divided the animation into two. First, the key elements that are always present on the screen, such as the ribbon, box and the text. The second part is just the word and the countdown. We animated all 12 words separately and the developers triggered the animation that was relevant to the gameplay. For example, in the gameplay, if you found the word “Tinsel”, we would then layer the Tinsel animation.
Summary
We’ve successfully used Lottie in tons of other places, such as modal messages, marketing campaigns, micro interactions, loading states and more. We’ve also used Lottie in our new sleep app — Rise. Everyone on the team is super excited to work with it as the experience it allows us to create is more engaging and delightful.
We have had several hiccups during the development of the projects, but have managed to overcome them with our creativity and hard work.
If you want to learn more about the quirks of Lottie, you can read more here: http://airbnb.io/lottie/#/after-effects
Always preview your animations before sending them to devs with the Lottie preview tool: https://lottiefiles.com/preview (Also available on Android and iOS)
If you have any questions the Peak design team is always happy to help so just ping us or comment below!
Download Peak to find out more.
Hope we’ve inspired you to give Lottie a try!
The following work has been done by the design team at Peak: Antoine Rapy, Meylin Bayryamali, Riccardo Liberati, Tom Piggot, Vittorio Veneto and our talented engineers.
Follow us on Dribbble.
Thank you for reading.
