10 Principles of Animation in Material Design

Nowadays it’s not that easy to impress someone with interface motion elements. Such animations reflect interactions between pages, guide on how to apply the service or just focus users’ attention on something specific.

In our article we would like to present main rules and approaches on interface animation, thus, developers who are about to build animating interfaces will find core principles right here.

However, before moving to specific animation approaches, we shall say a few words about Material Design itself, shall we?

Meaning of Material Design

Basically, Material Design refers to an instrument for users to manage platform components. Once Google designers realized how critical it is for components to possess specific physical properties, like, width, velocity, shadow, etc. In such a way users feel like they handle real-world physical items.

Actually, here we aren’t talking solely on physical characteristics. Specific material could also adjust size and scale, colors. Content could be divided into few pieces or comprised in one screen.

Material Design Animation features prominently in the process. It serves to reflect object physical characteristics — how particular objects accelerate or decelerate, how they deal with inertia. Object motion is carried out in a smooth way making it comfortable for visual perception.

To avoid content overload, Animation of Material Design shall be applied only if it’s relevant. It’s a tool to escape from a flat design without overcomplicating it.

Provided below ten points shall help build really substantial transitions by means of material movement.

#1. All interface components shall be consistent with single overall logic.

A specific technique to create a user flow significantly affects user experience in the context of an app. Material Design supports the approach to develop fully gradual user flow.

The material is free to shape-shift. Every item shall move separately and independently when moving to the next screen.

Picture a screen that fluently transits into the next page and still having few components of the previous one. We hope you understand our point.

Here is a great solution for a fitness tracking app:

Also remember on easing, as such a tool makes animation be perceived in a more natural way. Being one of the core tips for Animations, easing prevents motions from looking artificial or even mechanical — accelerations or decelerations works that magic in here, so elements look like living items of the real world.

#2. Ensure gradual elements speeding up and slowing down movements.

The idea is to come up with a transition to be clear and convenient for users. Make motion process seamless, plausible and realistic. We realize that Material Design strives for reproducing phenomenons of the real world. Therefore, inertia could become a perfect means to smooth out accelerating or decelerating processes of animated components.

#3. Take advantage of icon animations.

It’s a pretty up-and-coming approach. Honestly speaking, the audience doesn’t actually notice those details, nevertheless, they create a positive influence on the overall opinion of the service.

Sometimes icons could be made with context buttons having circular reveal effect.

Here is a nice chat app concept:

#4. Create different timings for different motion items.

Don’t you think that animated objects showing up one at a time, turn to be more interesting and more vivid? Such an approach provides users with the possibility to look upon each item. Presenting all page elements at the same time simply confuses users, as they don’t realize where to look at.

#5. Object shifting shall be coordinated in the same overall direction.

Disorder movements or unclear transitions will only confound users, so they will have to put some efforts to figure out what is happening. Think of the approach when the following item comes up before the previous object disappears. That will work smooth and nice for the users’ experience.

Applying equal interaction makes all elements follow a common pattern or a specific rule. Thus, all objects make one smooth flow showing users a specific direction to pay their attention. It’s critical to follow a particular order, as this is the only way to grab users’ attention without getting it divided between several elements. On the other hand, putting all screen items at the same time would also look bad.

Have a look at Balraj Chana decision where object motion is arranged gradually in the same overall direction:

#6. All items shall react with motion on touching.

Material Design principles require every interactive content item to react somehow upon users’ touching.

We all know such most widely applied motion as ripples effect which radially spills over interface space. Another visual response could be bouncing or hovering effects.

UX turns to be more fascinating and breathtaking when simple interactions trigger a specific response to the user’s activity.

#7. Build a smooth transfer from one page to the next one. Ensure those pages to have common items.

Designers’ task is to find the solution to perform the screen-to-screen transition in the smoothest possible way. You don’t want users to feel lost, do you? One of the options could be to keep on a new page a few elements from the previous screen. Thus, users will see where they are at a specific moment.

Here is a great example of it. To-Do Manager platform is designed in such a way to show the Time Manager icon on two subsequent pages:

#8. Components are separating and a certain item is getting lifted (visual effect).

Due to Material Design tool, there is a chance to feel the space and physical elements which are beyond a display. Developers can make free use of shadows or motions to point out a specific element by lifting it visually. What if an item hovers above other material elements?

#9. Before building a transition, decide what data has to be focused on.

It’s critical to pay due attention to object layout and the transformation process itself. Don’t neglect it! Choose the most critical info you would like your users to notice. Put it clear, visible and notable.

Remember to arrange gradual shifting of objects for effective user flow.

It’s about so-called subordinate interaction when presenting a specific item to draw users’ attention in such a way that other items subordinate to the main one. It creates a feeling of order, thus, people pay more attention to specific items.

Subordinate interaction serves to demonstrate a user where to look, otherwise, his attention could be lost or dispersed.

In case you decide to animate a few items, your task shall be to clarify the order of their animation and minimize the number of moving items.

#10. Think through duration — it matters.

As you already know, Material Design is to provide seamless transitions. At the same time, the designers’ task is to determine the best timing of every object movement.

Being excessively slow, animated elements might only distract users or even impact user flow. On the other hand, overly dynamic motions will definitely confuse customers.

Check out Jelio Dimitrov solution:

We are sure, you will feel the middle ground ensuring optimal duration and proper readability of animations. Come up with a solution to provide your users with enough time to notice changes without making them wait. Researches prove 200–500 ms to be the best animation speed.

Summing up now it gets clear that motion is to make interface evocative and simple at the same time. It’s sad to admit that — being so potential — motion is perceived as pretty complicated and hardly understood notion. We hope that our research helped you see its key principles to deal with animation in a simple and adventurous way.

About the author:

My name is Anastasiia. I’m a writer for Agilie. I’m working closely with the mobile and web application development, so I often write tips on the development process optimization, various design solutions, and relevant business cases.