Functional Animation Beginner’s First Article — Part.1

Previously, I did a lot types of animation. when we start talking about animation, someone may think it’s like the below one, it’s more about fancy and attractive.

motion graphics

but in this article, I want to show Animation is also useful. we name it Functional animation.


Let me give you a quick example to explain what it is.

we all open an app, right? You open it, and just goes like this. It just throughout all the components to your face,.

it’s not cool…

With a little tracks of animation, you don’t need to change any elements of this interface, just show it orderly.

Just with one second you know all the value this app can bring to you. So it’s very smart way to design this app. right?


You may think one example can’t explain all the value, you may not buy in, So I will give you another one.

Navigational Transitions

This one I did it on the Microsoft Translator app, the things here is: after user go back from the translate view, the result will go to the history list. So how to let user know the relationship? Let’s see how functional animation works in this case.

The functional animation provides visual cues, it helps user see where a new object comes from and where a hidden object goes.

The key value is: 1. Define the spatial relationship between elements and pages. 2. Help users understand the change that has just happened.

Two example is not enough? I will give you the third one!

Visibility of System Status

This one I did it on the voice search feature in Bing app v5.0. Users want to know their current context in a system at any given time.

When you jump in the voice search view, the interface telling you can “Speak Now” And you just start speaking, the animation telling the app is listening.

And after you finish, the interface display the loading animation, it telling you: hey I’m thinking :) after that you got what you want.

The functional animation’s value here is, it provide real-time notification of a system status, enable users to quickly understand what is going on.

Visual Hints

We are designers and we love touch new things, so what’s the hot topic now? AR and VR! Right? but it’s really technical driven, not everybody know how to use it. As a designer we aren’t just knowing things but help more and more people play around with new technology easily, it’s our mission.

This one I did it on the AR search OOBE experience.

AR search feature in Bing app

There will be a game experience, once you play with it, like what it said, it’ll give you encouragement: You did it well and you can start to play with it!

it’s very exciting! No need to have lots of efforts to make complicated design, it’s just funny and smart animation, right?


  1. Functional animation isn’t random, there’s purpose behid each action.
  2. Using animation principles can help you provide a clear cohesive experience.

Yes, Functional animation can deliver the personality of the apps, there is very ineresting interaction between users and the app. It’s benefit UX a lot. It’s not just a good to have things!

Now, I think as a designer you may want to play around with Functional animation right? but before that, I really want to ask your opinion of What Makes a Good Functional Animation?

Please feel free to leave any thinking of this, next article I will share my :)