Lottie Who?
The process of creating motion for mobile felt broken up until Airbnb released a stunning open source library called Lottie. Prior to then (Feb. 2017), creating complex mobile animations required an arduous back-and-forth between designers and developers.
Designers would create prototypes for developers who would have to either recreate them by hand in multiple languages (once for Android and once for iOS), or choose to embed large non-scaling GIFs or image sprites. But Lottie changed all of that, rendering intricate, scalable animations for both iOS and Android with the ease of including a static image. Swiftkey, for example, swapped out a .png sequence at 6mb in size for a Lottie .json of just 340kb. The pristine fidelity and download savings have an enormous impact on the user experience.
Image credit: http://airbnb.io/lottie/
It’s a big deal to have this power, and droves of designers are scheduling time out of their weekends to learn the new toolchain. But it’s surprisingly complex.
Lottie's reliance on After Effects
Lottie relies on Adobe After Effects (AE) as its animation creation tool. AE’s brilliance is undeniable — it’s the industry standard for animating cinematic movie titles, intros, and transitions. But with the power comes a labyrinth of complexity (many features being unsupported by Lottie and UI animation in general). AE’s capabilities make it nontrivial to learn, and sadly the steep curve puts using Lottie out of reach for many designers.
As we imagine the ideal set of tools for UI motion design, we can’t help but wonder if AE is really the right companion for Lottie. After all, AE being used for UI motion design is beyond its original scope. The situation feels analogous to 2005, when designers were relying heavily on Photoshop as a UI design tool — not because it was made for the type of work, but because there was nothing better suited on the market. Then along came Sketch, a tool with a pure UI design focus.
What if there were an “After Effects” that was intended for app motion and interaction design?
A new way to Lottie
We designed Animator from the ground up for animating UI components. Like Sketch, it is a simple tool with a specific purpose, and like AE, it is compatible with Lottie.
Our users are saying that it’s more intuitive to animate, and generally much easier to get up and running than AE. You’re not required to download and install special third-party plug-ins for both Sketch and After Effects, then learn to animate using the subset of features that are supported. You simply create animations in Animator and publish.
After publishing, you’re able to choose to use Lottie as your player (for native applications), or to use our own player (web only for now) where your animations can respond to user interaction.
On top of that, we have a little something up our sleeve we’re calling Live Design. Imagine making a change in your drawing tool (Sketch) and seeing it instantly update in Animator, your application’s codebase, and across all of the production platforms you’re targeting. That’d truly be an unprecedented connection for design and development teams — the backbone of a connected design system.
There’s recently been a lot of buzz about design tools implementing “design system managers” when they are in reality merely static pictures of design systems. We think there’s a better way forward—that a design system should be a living set of components. With Animator it can be just that, and it’s a big difference. We’re going to release Live Design into the app soon. Until then, here’s a quick teaser of just how satisfying this paradigm-shifting workflow feels.
Full disclosure: Animator is currently in a private preview and there’s still a few things you can do in After Effects that you’re not yet able to in Animator, such as shape morphing and masks. These are important features and we’re working on bringing them into the app as soon as possible. That said, Animator already has many features that AE doesn’t (Live Design, Interactions, Events, States). We hope our vision to empower designers inspires you to try out our private beta.
Sign up and see what users are creating over at www.haikuforteams.com.
This post was originally posted on Medium
