Most of the apps I have worked on, and it’s quite a few now, rely on the standard Apple and Android loading animation (known as a “spinner”) to show progress while loading or processing. If you’ve used a mobile phone in the last ten years, you know what I mean.
iOS and Android Default Spinners
In a recent project, I had the great opportunity to develop a custom animation to replace these ubiquitous spinners. Of course, I was excited to try my hand at spinner-crafting, so I opened up After Effects and went to work.
As it turns out, these little animations are a lot more subtle and expressive than I had previously imagined. I worked through numerous options for spinner animations, but they all seemed to fall a little short of the original. We had troubles implementing some due to the limitations of the animation framework we were using (more on this in a moment), but the main issue was we couldn’t land on a spinner that we all thought had the right feel.
Animation Tests
Sample animations – GIF format
As you can see from the above, the spinner originally was intended to pick up on the brand element of the blue hexagon. This caused some issues with implementation, as the framework for animation in iOS did not support the hex shape as fully as others, so some animations just didn’t work in iOS. More than that, though, these animations never seemed to capture the essence of a spinner animation, and they didn’t convey the appropriate sense of calm that the default spinners seem to do. These all seemed too angular and jagged.
The Solution
After numerous attempts, I decided that one of the main issues with these tests was that we had moved away from the circle traditionally used for these animations. It didn’t seem like a big change at first, but as soon as I tried going back to circles, the design quandary resolved itself.
The final version (above) seemed to resolve the issue of fluidity and calm – and effortlessly embodies the idea of a spinner. Once we had landed on the right design, the implementation flowed like water. This animation conveys the fact that all of the parts are working smoothly in harmony and provides a bit of colour in an app that was quite monochromatic before this addition.
As a final touch, it really elevated our app to the level we needed. The custom spinner (and other animations) really gave the app a life of it’s own.
How It’s Done
It all starts with After Effects. Design and build your animation to taste (more about how to do this in a later article), and then use the Bodymovin extension to export your animation as a JSON file.
Don’t panic! Your developers will not throw you out of a window when you suggest custom animations, as long as you tell them about Lottie. Developed by AirBnB (thanks guys!), Lottie allows you to implement custom animation without coding it all manually. Developers can integrate the Lottie module in their code, which allows the addition of JSON files that describe the animation (produced with the Bodymovin extension in AE). Lottie then converts the JSON file to native code for iOS or Android, and that’s it!
Lessons Learned
A few words of warning to help you avoid some of the pitfalls I struggled with:
- Keep it simple. Lottie is very flakey in the way it interprets animation files, and it doesn’t support everything you can do with AE, especially on iOS. Always preview your animations on Lottie’s preview screen and use the Lottie preview apps for iOS and Android to make sure your animation renders properly.
- Spinners are counter-clockwise. Don’t ask me why, they just all are. And if you design your animation this way you will be a lot closer to a recognizable spinner.
- Spinner animation should cycle approximately every second, and loops are much easier to implement than something more complex with intros and transitions, etc.