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.
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.
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.
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.
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.
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: