Motion In Mobile

Motion graphics in the world of mobile app design were once considered an afterthought, an extra feature that could be added if time and budget allowed for it. Nowadays, they can be found everywhere from onboarding storylines to user prompts to informational responses to microinteractions. It’s no surprise either because adding animation doesn’t just give your app a makeover but also provides guidance and feedback in a more interactive and understandable way. We are evolutionarily more fine-tuned to give our attention to moving objects.

So what was the change that brought about this influx of motion graphics? Advanced libraries and frameworks that made the process of creating and integrating animations easier than ever before. What once was considered an unjustifiable expenditure of time and effort is now close to being a must-have. In this post we will be go over the alternatives available, and end it with our favorite choice, along with the our reasons for choosing it.

1 - Building By Hand:

Your designer painstakingly crafts a gorgeous motion graphic and hands it over to your developers. What comes next? Using just a gif as reference they have to write complex code that replicates the behavior as best they can. Code that can wind up looking like a stairway to not heaven, but hell. Although Cocoa’s Core Animation is extremely powerful, and Android’s Animated Vector Drawable offers some relief, this difficult process is the reason motion graphics were as rare as tumbleweeds in the Antarctic.

2 - GIFs & PNG Sequences:

An easier method for adding animated spice to your apps would be plugging GIFs directly into your codebase. The methodology, however, is slightly outdated. Designers need to export their After Effects files in the .mov format and, after importing it into Photoshop, export it as a GIF using the Save for Web legacy option. Quality usually drops dramatically and alpha channels become grainy. On top of all this, GIFs can incrementally end up bloating your app size and do not scale well (making working with different screen sizes a nightmare). PNG sequences are even worse when it comes to size issues.

3 - Squall:

Squall is a tool that takes After Effects animations and recreates them in code. Consisting of an After Effects extension, an SDK, and an app, Squall not only makes it easy exporting animations into native code but also gives an excellent preview option that helps save time. However, it does come with a hefty $99 dolar price tag. Another disadvantage to Squall is that there isn’t as dynamic and resourceful a community around it as there are in the following the libraries.

4 - Keyframes:

When Facebook changed their react option from a static thumbsup icon to an array of adorable animated emojis, the world rejoiced. Well, rather heavy users of Facebook did. The response prompted them to release a library they dubbed Keyframes. Using an After Effects plugin, Keyframes exports your animations into a JSON file which can then be plugged into Xcode or Android Studio and called on with a few lines of code. Simple, lightweight, and easy to use Keyframes is one of the game-changing libraries that helped spread the use of motion graphics in mobile apps. The only reason why we didn’t give it first place is because it is limited in what it can export from After Effects missing out on masks, mattes, trim paths, dash patterns, and other complex yet crucial options.

5 - Lottie:

Finally, we come to the easiest, and our favorite method for making your app dance. Lottie, released by AirBnB on February 2017 is a mobile library that parses animations exported as JSON with Bodymovin, an After Effects plugin developed by Hernan Torrisi. The exported JSON, with a file size small enough to ignore, can be dropped into your IDE of choice and manipulated with simple and intuitive commands. With more support for options within After Effects than any other similar library, Lottie’s flexibility has made it the primary choice for companies like Google, The New York Times, Uber, and Walgreens. There have been a lot of improvements made since its debut and the engineers behind Lottie are constantly adding more based on feedback from the community. Speaking of which, the online community that is rallying behind Lottie has been surprisingly active and collaborative coming up with projects like LottieFiles where you can not only find and tweak more than 300,000 animations, but also preview your own animations by uploading them and scanning a QR code on your phone. To top it all off, Lottie is open-source! Flexibile, powerful, growing range of support for After Effects tools, open-source, and with a thriving community behind it, it’s not difficult to see why we chose Lottie as our go-to motion graphics framework. To top it off, it is named after Lottie Reineger, a pioneer of silhouette animation,someone we were thrilled to discover.

Check out his work below: