Messenger comes to life through motion.

Motion is an important part of the Messenger experience. We use motion to provide feedback, improve understanding, and give people a sense of connection. Motion has the power to amplify brand expression and increase the perception of quality. Through the use of motion, we can not only delight users, we can create trust, engagement and help guide users through their experience on messenger.

Motion Principles

• Intentional

When used correctly, motion is a means of building expectation, reliability and trust. Every animation should have purpose and consider its effect on the overall experience.

• Informative


Motion is designed to educate or guide users towards important information. It should be used as a means to help navigate the user or build a clearer understanding of features to improve ease of use.

• Expressive


Motion can be used to celebrate important moments, add character, drive connection and more. While expression motion is fun, it should be used sparingly.

• Adaptive

Motion on Messenger should have continuity with its surroundings. Consider the characteristics of the app and OS where it will be viewed and allow that to inform the curves and duration of animated components.

Performance Vs. Expressive Motion

Motion on Messenger is made up of two categories, Performance Motion and Expressive Motion. Both categories share the MDS motion principles, but each has a different purpose and uses different types of animation.

Overview

Performance Motion on Messenger is designed to navigate the experience. Navigation is about being clear, intentional and efficient. Performance motion creates transitions, hierarchy, informs the user and improves perception of quality.

Easing and Durations

When objects move they rarely move at a constant speed. They speed up and slow down as they move from one place to another. This acceleration and deceleration is referred to as easing. Easing curves, also called cubic bezier curves or motion curves, are the precise measurement of an object's acceleration and deceleration as it travels.
Using easing curves is necessary for creating smooth and sophisticated animations.
This is an example of animation with and without easing curves.

Easing

Animation Constants

MDS has 3 sets of animation constants.

• Motion Types

• Motion Curves

• Motion Durations

Each set has predefined values that can be used or mixed and matched to create unique animations of varying ease and speed, to help adopt the look and feel of different platforms.

Motion Types and Curves

The motion types, shown here, are the preset moves that are used to create consistency across Messenger.

Move

The Move Curve is used when an element's movement starts and stops on screen. This applies to position, scale, or rotation. If an element expands or collapses, please use the Expand/Collapse curves

Examples:

To and from chat/inbox

Move

The Move Curve is used when an element's movement starts and stops on screen. This applies to position, scale, or rotation. If an element expands or collapses, please use the Expand/Collapse curves

Examples:

To and from chat/inbox

Expand/Collapse

The Expand/Collapse curve is used when an element starts and stops a movement on-screen. This movement is a direct response to a users’ input. This curve is used anytime an element changes scale, or appears to move forward or backward along a Z axis. Expand and collapse use the same easing curve, but collapse requires a shorter duration

Examples:

Photo select/edit, Composer window/Input field

Fade

For elements that fade on or off, we use the Fade curve. This curve uses linear values rather than easing curves, because changes in velocity aren’t as perceivable for opacity changes as they are for position changes.

Examples:

Audio and Video call, Camera

Duration Constants

Duration constants are a set of predefined values to describe an element's speed over time. There are 6 preset variations ranging from short quick moves, to longer slower movements.

Overview

Expressive motion brings static images to life. It can add emotion to the experience.It is playful, engaging and fun. Through expressive motion, we can tell stories, add character, bring delight to common interactions.

Usage Guidelines

Expressive motion is used to add delight and character to a conversation. It is playful, emotional, fun. This type of motion can be used to get the user's attention, provide instruction and bring images to life.

Of the 2 categories of Motion within MDS, Expressive motion is much more flexible, however it should always remain clear and intentional. It should avoid being excessively complicated and It should not create too much distraction or visual clutter.

When to Use

• Providing instruction

Creating fun animated interactions can elevate the user experience, especially when explaining new features or guiding the user.

• Highlighting moments

Moments of celebration or emphasis are good opportunities for expressive motion.

• Bringing static images to life


Static images can become more engaging when they contain animated elements.

What to Avoid

• Avoid interfering with Performance Motion

Expressive Motion should not interfere with UI animation in the Performance category, and should not be used for transitions or navigation. Expressive motion should be used intentionally and sparingly, when animation is overused, it can add confusion and visual fatigue.

• Avoid being distracting

Animations should be mindful of their surroundings and need to be part of the whole experience. Motion can be used to add visual interest and engagement, complementing the visual design, but it should not take away from the UI experience or add too much visual clutter.

• Avoid taking too much time

If an animation is meant to get the users attention try to keep those animations short. Users usually pay attention to one piece of animation for under 3 seconds, so the shorter and cleaner the animation is, the easier it is to be accepted by users.

Best Practices

These best practices are designed to assist designers and animators in further understanding the personality and vocabulary of expressive motion. 

Expressive motion is the category that is intended to be fun and should reflect the basic animation principles that encourage playful behavior. Examples of these basic principles are the use of easing, bounce, stretch, anticipation, exaggeration and emphasis. 

We should avoid animations that feel too rigid, linear or slow. Instead we should focus on these more playful animation principles to create more dynamic and engaging animations.

Ease in, Ease out (also known as smooth in, smooth out) describes changes in speed as an object moves from one place to another.
When objects move, they need to accelerate before they reach a steady speed. Similarly they need to decelerate before a stop. In animation this speed change is referred to as easing. Using these kinds of speed changes can make movements feel more believable and create a sense of momentum.

Anticipation / Follow Through

• Anticipation is the preparation movement that happens as a wind up or as a or a lead into the main movement. This helps to build up energy and create a sense that something is about to happen.

• Follow through is the residual or secondary movement that happens after the main move is complete.

In this example the main move is the position change from left to right. The anticipation is the lean and subtle stretch before the position change, and the follow through is the lean and bounce after the position change.

Squash and Stretch

Squash and stretch describes how an object changes shape as it moves to give it a sense of flexibility and elasticity.
This animation principle is used to reinforce changes in speed, momentum and contact with other objects. A classic example of this is how a ball squishes to be more flat when it hits the ground. It needs to maintain its volume, so it also widens as it is squashed.

Mass and Weight

Creating a sense of weight and mass can help to inform how an object behaves. It can create more intentional movements as well as help with animation timing.