Apps of the modern day love a good bit of animation. Whether it’s an animated logo; some subtle additions to button pushes; or implementing what we call microinteractions. They’re setting in as one of the number one ways to make an app ‘feel’ more premium and as if it comes from the likes of Airbnb, Netflix or Google. This has been the case until recently because developing them can become incredibly costly. Hiring animators to work with front-end developers for long periods to perfect such a tiny portion of an app seems as if it wouldn’t be worth it for many projects.
Since animation has embedded itself further and further into the app space, various organisations have come out with libraries to support developers in creating these far more quickly, and the same has been happening on the designer/animator end. Lottie by Airbnb is one such library. It’s been created to enable designers to hand a developer a single piece of javascript which creates a full animation. You can attach markers to it so they can loop, reverse, change based on certain interactions, and all sorts. Best of all, it works with React Native, our favourite development framework, so we love it. With this and other libraries in mind, animations are slowly becoming accessible to smaller projects and agencies.
Below are a few ways in which we’ve been looking at adding animation to our apps recently:
Spring
Since Lottie uses a programme called Adobe After Effects to work, you can add what’s known as ‘spring’ easing to animations by playing with a bit of keyframe velocity. Spring adds an extra bounce to an animation, which helps make everything feel natural, as if your app blends into actions which happen in the real world. You can see the difference here, where we have an animation which has a type of spring easing called ‘snapping’, versus one which doesn’t.
Micro-interactions
Micro-interactions have become a big part of modern apps. For the extra effort, they can make users feel much more at home with an app. They can see elements on-screen respond to them quickly and fluidly as they navigate. Micro-interactions also allow a user to enjoy little moments and easter eggs dotted across the app. These can be something as small as animating some icons, adding some sparkle to a button tap, or throwing in some animated toast tips to show users around. A personal favourite of mine is a colour picker animation used in a WordPress theme called Divi, which I’ve mocked up a similar version of here.
Full-screen Transitions
Something we’ve been experimenting with here is the ability to use lottie to create and/or assist custom full-screen transitions. These become a little complicated and can take more work, but they can make your app look much more interesting; especially when making bigger transitions which involve sending or loading extra content in the background. In this shot we’re demonstrating using this for a login screen.
Loading Screens
One of the most common uses out there for Lottie is to create fun, bouncy loading screens. These give a user both feedback and something cool to look at while they wait for everything to happen in the background. Once the app finishes loading, you can even splice this into a full-screen transition or a finishing pop.
Adding Flair to Walkthroughs, Zero States and Error Screens
Adding Lottie animations to your app’s walkthrough screens can help a user’s education process. Animating elements to show one at a time can aid a user as they read through content. Animating zero state screens can have a similar impact, since you can direct a user on ways to solve their problem quickly.
Bringing Into Production
As much as creating animations similar to the above is fun, Lottie is limited in the assistance it can provide. Development still needs to form the backbone for just about all of the animations shown here. Transiting between screens still needs a high level of manual effort; Lottie just makes this process slightly easier. Many small microinteractions can be powered by Lottie animations, but once you add any slightly more complex functions, the microinteraction becomes almost impossible to create using Lottie.
What’s Next?
When looking to the future of animations in apps, it certainly looks to be a bright one. The recent introduction of SwiftUI by Apple, libraries such as React Native’s MagicMove, and continued support from leading organisations is slowly bridging the gap between design and development. UI designers can now begin to prototype intricately-animated app interactions and throw the code to a developer simply to paste in. All the same, developers can activate libraries to do increasing amounts of pretty animation work for them.
What are the best animations you’ve seen used in applications? Do you have any nifty suggestions that haven’t been listed here? You can get in touch with us by emailing hello@thedistance.co.uk – we’d love to hear from you!
Article by Jack Howell, UI/UX Designer at The Distance.