A GOOD tool improves the way you work, a GREAT tool improves the way you think.

—Jeff Duntemann

In the product design domain, there’s an increasing tendency of using subtle, intuitive and joyful interaction animation to deliver concise information by visual language, which makes contributions to the overall user satisfaction and product success at the end of the day, not just delights or entertains users. When designers create an animation as a no-brainer, the crafting, itself, is empowering people to think big, something more significant than the technical implementation as it’s taken by the tools revealed today.

If you’ve ever been fretting about the questions as followings, now you’re in the right place to hone your design skills to be a well-fledged designer!

• I’d like to have animations on my design projects but I can’t program
• Deploying gif animations into apps may drag on app performance so I don’t know how to make it happen with engineers
• I don’t want to go through the massive learning curve but an animation library to perform animation functionally will be highly appreciated

One last thing before unboxing the pleasant surprise, please bear in mind that only by using meaningful animations properly can we level up the design execution to the next level. The key value of such nice-to-haves is to spread icing on the cake, don't get it backfired by distracting user interactions.

Best Practice for Designers upskilling Animation Design Efficiently

Lottie by Airbnb

a. Take a peek at Lottie— Foundation of App Animation Design

As the official intro briefed:

Lottie is a (codebase) library for Android, iOS, Web, and Windows that parses Adobe After Effects animations(compositions) exported as json files and renders them natively on mobile and on the web!

It aims to scrap the heavy technical debt to program animation so that back-and-forth discussion must be heavily involved to deliver flaw-free animations. Lottie demonstrates an easy way to generate quality animation to ANY native apps like in iOS or Andriod in the framework of React Native library to render and program by itself. Free up time for engineers so designers can better manage contributions by a perfect design artefact.

Animation based on Lottie from JA Studio

What’s more, Lottie features a few breakthroughs in animation development as follows:

1. A lightweight plugin that 100% supports AfterEffects
2. “Standalone development” no tech savvy required, anyone, anytime, anywhere
3. Performance first, typically just xx-xxxKB, compared to gif exported from the same animation which could be xMB
4. Extremely lightweight, capable of being triggered by user interaction and system response to concisely deliver feedback

Animation Created by Lottie in Airbnb Android

At this stage, you don’t need to do anything from Lottie so far, unless you’d like to challenge yourself to create your magic animation in AfterEffects(but we’ll cover it in the end as well).

Since the manual coding work has been taken over by Lottie, the only question to make things happen is to build your magic animation. Don’t worry, you’re NOT required to understand how it works, or build it by yourself because the shining star now is coming through.

b. Lordicron — Your design bestie to make magic happen based on Lottie

When it comes to the Lordicron icon animation library, the metaphor would be a nautical chart as it illustrates the incredibly feasible, meaningful and plug-and-play animations for designers to weave the beautiful interaction perks.

In the framework of Lottie by Javascript, Lordicron is capable of sweeping away the coding blocks for designers to make your animations happen, free of charge. Let’s check out how it works on interaction animations:

Animation for HoveringAdvanced Animation “Party” while Hovering

For every designer, Lordicron animations can be used on your portfolio or your design projects to improve the interaction experience. I’ve called to mind this splendid tool when I build my portfolio a few months ago. By speaking in visual language to convey the information or the design jargon, an explicit and unforgettable image can be better delivered to the non-design audience.

As to the design superpower, the stroke animated icons were used on my portfolio powered by webflow to speak for me:

Icon Animation Used on Personal Website — HoveringIcon Animation Used on Personal Website — Loop

In the following section, let’s run a tutorial to get the hand-holding steps on using Lordicron animations! Remember to grab your impeccable taste for selecting animations!

Animation Tutorial using Lordicron

Great! You’ve done an amazing job reaching this tutorial. Now, just sit tight to follow the tutorial then your design can be equipped with the simple and intuitive animation for interaction perks, which means, that user satisfaction could be improved in most scenarios by microreactors.

In UX design, micro can be macro. One good animation or sound design can get the users hooked, whereas a bad design can put them off.

— Dan Saffer

a. Pick Right Animation from Lordicron

First of all, just scroll through Lordicron library, then tap the available animation that suits your best fantasy, or design scenario, then you’ll get it right-hand side:

Step 1: Pick the most concise icon

Pro tip: Lordicron has different variants of icons with animation, just switch between “OUTLINE”, “FLAT” AND “LINEAL” to ensure the right way to represent your information, also, pay attention to the icon consistency.

b. Brand localisation

Design system, which might not be a buzzword for most designers. The colour palette from the design system helps speak for the company brand to maintain consistency and interface aesthetics.

Just check the colour palette if you do have it, or pick the right one to make some tweaks for your icon animation as localisation.

c. Export as handover for engineers

All done! Just export the JSON file(the design handover that developers after), or, select the best option that suits your needs at the end of the design contribution.

After tapping JSON, for example. You’ll get an “xxx.json” file on your local computer, just pass it to engineers then they’ll take it over. No concerns about scalability as Lordicron uses vector icons, so the animation will automatically fit into scenarios without a back-and-forth discussion between designer and developer.

For those who’re using webflow, just add an independent Lottie Animation element as follows, chuck it into the right layer in the Navigator section.

Then switch to Settings, tap “Replace Lottie Sequence”, select the JSON file exported on your local computer, then save, DONE!

d. Congrats! You’ve reached a legend, bravo!

Animation by JA Studio

Wanna challenge yourself? Step into Animation Expert by BYO “magic” in AfterEffects with Lottie

Growth comes from the areas that we’re not qualified to do, that’s why challenges! When products step into the 2.0, 3.0 phases, more and more bespoke work is anticipated to come through. Diving into the fundamental building blocks for App Animation helps designers solidify the toolbox, and also, a better way to connect to our target audience by making genuinely meaningful and informative animations.

Following is the advanced tutorial to build your animation in AfterEffects using the Lottie plugin to get your beautiful animation “implemented” on your own, bug-free.

a. Set up the Lottie plugin

Download the free official plugin for AfterEffects here, make sure you have Extension Manager or Adobe Creative Cloud with AfterEffects installed successfully.

b. Assessble your magic animation in AfterEffects

Time to show your creativity and build your animation, exciting! Remember to check the animation by previewing your animation in AfterEffects before exporting it by Lottie.

Preview your animation — Lottiefiles.com

c. Enjour your tea/coffee for Lottie to program your “magic”

When finishing crafting your beautiful animation, just select Extension — LottieFiles then select the right composition of the target animation to export. DONE!

A year ago, when I was building a case study for my online portfolio — CommBank App Concept, it was the chance that I have try Lottie to craft some animation for the icons. It turns out to be a leap in improving visual perks, which could contribute to overall interaction satisfaction.

The following animations visualise the scenarios or feedback for the online banking apps in a few scenarios:

Icon Animations Concept for CommBank App

d. Shout out to your attention!

Thank you for sparing time scrolling down here, animation design may not be part of the MVP for most products but a leap to visualise complex information to minimise cognitive load for users. We didn’t cover how to build an animation that contributes to the product or business success, but the way we contemplate when & why, and in particular, how to utilise animation to help deliver a great experience cost-effectively is what we’re after today.

Animation by JA Studio

Before you go…

As a product designer who specialises in multiple design areas, no gift on earth could adequately help us articulate my gratitude to the people who helped me along my design journey. Just realized that I must take this back to our community by helping more designers achieve their goals!

If this article gave you any ideas on animation tricks or inspired you, please feel free to leave your applause to let me know.