How to implement animations in apps?

For mobile applications, motion is becoming more and more important, and isn't to be underestimated. The problems designers have lie not in the capabilities of current mobile devices, or in the lack of good animation tools — it's more the data formats.

The question is not whether we should integrate more motion into our user interfaces, rather, it's how we can improve the workflow between developers and designers. Of course, the challenge for designers isn't to simply add pretty animations and motion design to apps, regardless of whether they make sense. We shouldn't overwhelm our users with the latest trendy visual effects, just for the sake of it.

Rather, the focus of the app should be on its content.

Motion makes a mobile experience emotional, and helps users to visualise complex processes within an app.

Motion tells stories, like "hey, you aren't muted anymore" or "this icons needs to be selected". If a picture is worth a thousand words, a moving picture is worth a whole lot more. Animation and motion help to give a sense of space to an app, bring the physical and digital worlds together. They can help a user to better navigate through an app — they can speak directly to the user, giving guidance, or even commands as to what the user should do next.

So, let's talk about HOW designers can make useful animations.

Especially interesting for designers is to know what their developers need in order to implement the motion designs in a smooth and fluid way. Currently, there are not a lot of good techniques for making motion designs available in a way that make it easy for Android or iOS developers to implement those designs.

The simplest solution for designers is probably to render the animation as an image sequence, whether PNGs or a GIF animation.

But approaches, where we can easily end up with dozens of images, in multiple screen resolutions, can quickly bloat the size of our apps, making both developers and users unhappy.

This example was animated with After Effects.

For more complex animations, such as logo animations, it's more efficient to use After Effects. The final rendering is exported as a PNG sequence. In case a GIF is required, you have to go the route of using Photoshop, as After Effects isn’t able to export GIFs.

For designers skilled in classic tools like those from Adobe, it's much easier to work with or learn After Effects, than to use prototyping tools where you have to have some knowledge of coding. But the result is always a pixel-based format. Besides a faster implementation, the main benefit of exporting PNG sequences or GIFs is that the developers and designers don't miscommunicate. What you see is what you get!

While the most popular and frequently used tools for motion design, such as After Effects or Photoshop, enable the creation of vector-based animations, they offer no direct opportunity to render these directly to vector-based file formats, like SVG.

Clearly these workflows aren't optimal, and end up creating more work for designers and developers alike. Furthermore, there are some plugins. The bodymovin plugin for After Effects can render to a JSON file, optionally with PNG or SVG container. That is a big plus for Android, as it now has backwards-compatible support for vector-based graphics. Another plugin is "animate mate" for sketch, the final result is a png sequence or GIF.

The example above illustrates a typical software, which is predominantly based on code. Finally the research shows a lot of prototyping tools for animating elements.

Tools like framer studio or PaintCode provide the ability to create animations and to then export them directly as code. But this is not the pool that designers like to swim in — it feels too techy; made by, and for, developers. Sometimes if you want a simple icon animation it's easier to communicate with developers what you want and let them implement it directly.

So my call to the designers and developers out there: there needs to be a better way.

With both Android and iOS supporting vector-based animations, we need better tools for motion design, better workflows between designers and developers, so that together we can build better apps.

A big hug to Chris Orr for proofreading.

Blog Logo

michaela berghaus

UX-Designer at grandcentrix GmbH



The Engine Room

thoughts, stories and ideas | from the grandcentrix team

Back to Overview