Lottie Without After Effects

Taylor Poe
Nov 6, 2017 · 4 min read

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.

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

Image for post
Image for post
Image for post
Image for post

Haiku Blog

The Haiku Team Blog (More posts at www.haikuforteams.com/blo

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store