Functional Animations in 3 Worlds – based on the Playground App

The importance of outstanding design

At 10Clouds we understand that the products we create must stand out and design is often a key factor when it comes to product. Our pals from the design team do an amazing job to ensure this happens. But how do you ensure that your animations are both functional and visually stunning? We take a look at how to create such animations on three very different platforms.

This article is for you if:

• You want to create functional animations but don’t know where to start
• You’re keen to understand how animation creation differs between different platforms
• You want to figure out the benefits and challenges presented by each

Why me?

• I am an iOS and React Native Developer with 5 years’ experience
• I work with custom designs made by our top notch design team every day
• I consult on technology choices with companies from start-ups to fully-grown businesses which serve hundreds of thousands of users
• At 10Clouds, we’ve delivered more than 30 mobile projects using both native and cross- platform solutions and we have a reputation for being one of the best mobile teams on Dribble and Behance

Types of Animations

I personally split animation into 2 types:

– eye-candy fillers

– functional animations

Eye-candy fillers

The first one has one purpose – to look amazing and to bring a static screen to life, like this one. It can be handled purely by a designer. And when created in the right form (e.g. Lottie) it can be easily applied on almost any platform. And since it’s not developer-dependent, we’ll focus on the second, and in my opinion more important type of animations.

Functional animations

Functional animations are completely different beasts. Usually they are way more subtle, sometimes simpler and crucially, in general they are User Experience driven. They help users to understand a product more easily, fill the gaps in the UI, show them what to focus on and what’s most important, and to give appropriate feedback. To create this kind of animation, deep knowledge of the UX and platform itself is necessary. We have different constraints on each of the platforms, and functional animations do not translate simply from web to mobile or vice versa.

The Playground App

To address functional animations on mobile we created a showcase app. On websites like Dribble we often see wonderful functional animations made for mobile devices, but we rarely see them implemented in actual apps, because implementation can be difficult and often time-consuming. But with close cooperation between the design and mobile teams, everything is possible. We took 3 components that exist in almost every app and brought them to life using beautiful and playful animations. The code for the animations in each platform is available on our GitHub page.

Fluid Tab Bar

From all of the animations in the Playground App I would like to talk about Fluid Tab Bar.

I’ve chosen this animation, not because it was the most difficult one to create (it wasn’t), but because we’ve implemented it in three different technologies. These are iOS, Android, and a cross platform mobile framework, quite popular these days – React Native. Each of them required a slightly different approach in analyzing and preparing the animation data itself. Nevertheless, we had to go frame by frame through this animation, translate After Effects frames, timings, and easing curves to something that is suitable for an animation tool on each platform.

Native Implementations

• iOS

It’s time to go through our implementations and to highlight the platform’s suitability for different types of animations. Firstly, let’s look at iOS.

On iOS we have two base layers which we can use for animating things. There are animations within UIKit itself that are usually enough for simple projects. But when it comes to bringing to life several dozen small animations simultaneously to get the effect requested by design, there’s a need for heavy machinery, which in the case of iOS is the CoreAnimation framework.

CoreAnimation gives us tons of power and possibilities when it comes to animating views both in 2D and 3D, but it is a steep learning curve. The framework appears lower quality then UIKit – Like all Apple’s frameworks starting with “Core”, API is not as Swifty as we would want it to be. Nevertheless when you master CoreAnimation, creating complex animations as we have done in the Playground App is relatively easy, after you’ve created the frame by frame analysis of the animation itself.

Since iPhones are high-end phones on the market, iOS is an ideal place for enriching your app with delightful functional animations which bring user experience to the next level.

• Android

Android implementation was very similar to the iOS version. The platform also includes powerful API for composing animations. In comparison with iOS, we can say that it’s even more granular, and pretty much everything had to be done by hand. Working on Android required more work upfront, but because there were no shortcuts, the animation precisely reflects the original one made by our fellow designers in After Effect. Also, the Android version was created as custom control instead of the UITabBarController subclass (as in the case of iOS), which brings more flexibility in usage and further development. Additionally it’s more error prone in future system releases than the UIKit dependent version on iOS.

Thanks to rich API and custom controls, Android animations were probably the easiest to make across all the Playground App Animations. What’s more – it’s great value when it comes to resource costs!

3. Cross Platform World

Here we reach the most interesting part in my opinion – the implementation of Fluid Tab Bar in React Native which is the hottest and most popular cross platform framework at the time of writing. React Native has a very neat API for handling animations. It’s readable, easy to use and combine. If the API is so good, what can go wrong?

Since this framework was created for iOS first, it still feels somewhat behind on the Android platform and Animated for React Native suffers from it. The disparity is so big that you can have perfect fluid animation on iOS and basically nothing on Android. What’s more, it tends to behave differently on different Android versions. Making it right can double the amount of work needed.

Animations on Google’s platform are quirky and full of gotchas. And there’s always the risk that we’ll end up with an unsatisfying solution. Of course there are some libraries like Reanimated which are more powerful than the plain Animated library and could solve multiple issues that may arise, but you’re always worrying about the next dependency.

Building complex functional animations in React Native is time consuming and frustrating. In addition, the API that is provided with it is way less powerful than solutions delivered natively with iOS or Android. From my experience, if we want to create an animation-heavy application that is engaging and stable, I would go with native solutions. Or… with Flutter.

Flutter, thanks to unified rendering solution brings the same animation to both platforms, and it’s truly coded once. Additionally, Flutter gains a lot of momentum nowadays and not without a reason. It’s very promising for cross-platform project with custom designs and animations. That’s where it shines the most.

In summary

Functional animations are a vital part of great user experience. And we shouldn’t be afraid to add them when the time is right. The key here is close cooperation between design and mobile and in 10Clouds, we have the expertise to make this happen!

Are you looking for experts to help you create visually-appealing, functional animations?

Get in touch with me on patryk.mierzejewski@10clouds.com.