MATERIAL MOTION

Motion in the world of Material Design is used to describe spatial relationships, functionality, and intention with beauty and fluidity.

What does motion matter?

Motion shows how an app is organized and what it can do.

Motion provides :

1. Guided focus between views
2. Hints at what will happen if a user completes a gesture
3. Hierarchical and spatial relationships between elements
4. Distraction from what’s happening behind the scenes (like fetching content or loading the next view)
5. Character, polish, and delight

How does material move?

The material environment draws inspiration from real-world forces, such as gravity and friction. These forces are reflected in the way user input affects elements on screen and how elements react to each other. Material in motion has the following characteristics:

1. Responsive : Material is full of energy. It quickly responds to user input precisely where the user triggers it.
2. Natural : Material depicts natural movement inspired by forces in the real world.
3. Aware : Material is aware of its surroundings, including the user and other material around it. It can be attracted to elements and respond appropriately to user intent.
4. Intentional : Material in motion guides focus to the right spot at the right time.

Characteristics of good transition?

1. Motion is quick.
2. Motion is clear.
3. Motion is cohesive

DURATION & EASING

Material in motion is responsive and natural. Use these easing curves and duration patterns to create smooth and consistent motion.

Easing curves

1. Standard curve
2. Deceleration curve
3. Acceleration curve
4. Sharp curve

Speed

When elements move between positions or states, the movement should be fast enough that it doesn't cause waiting, but slow enough that the transition can be understood.

Dynamic durations

Rather than using a single duration for all animations, adjust each duration to accommodate the distance travelled, an element's velocity, and surface changes. Objects leaving the screen may have shorter durations, as they require less attention.

Common durations

Desktop animations should be faster and simpler than their mobile counterparts. These animations should last 150ms to 200ms.Because desktop transitions may be less noticeable, they should be immediately responsive and faster than their mobile counterparts. Complex web transitions often result in dropped frames.Shorter durations will make these less noticeable because the animation completes faster.

Natural easing curves

These natural easing curves affect an element’s speed, opacity, and scale.

1. Acceleration and deceleration changes should be smooth across the duration of an animation so that movement doesn't appear mechanical.
2. Motion appears more natural and delightful when acceleration and deceleration occur asymmetrically.

Easing Curves:

Easing Curves include standard, deceleration, acceleration, and sharp curves.

Standard curve :

The stanThe standard curve (also referred to as “ease in out”) is the most common easing curve. dard curve (also referred to as “ease in out”) is the most common easing curve. Elements quickly accelerate and slowly decelerate between on-screen locations. It applies to growing and shrinking material, among other property changes.

Deceleration curve :

Using the deceleration curve (also referred to as “ease out”) elements enter the screen at full velocity and slowly decelerate to a resting point. During deceleration, elements may scale up either in size (to 100%) or opacity (to 100%).In some cases, when elements enter the screen at 0% opacity, they may slightly shrink from a larger size upon entry.

Acceleration Curve :

Using the acceleration curve (also referred to as “ease in”) elements leave the screen at full velocity. They do not decelerate when off-screen.Acceleration curve Using the acceleration curve (also referred to as “ease in”) elements leave the screen at full velocity. They do not decelerate when off-screen.They accelerate at the beginning of the animation and may scale down in either size (to 0%) or opacity (to 0%).

Sharp Curve :

Using the sharp curve (also referred to as “ease in out”) elements quickly accelerate and decelerate. It is used by exiting elements that may return to the screen at any time.

MOVEMENT

Material in motion abides by forces similar to those of the real world, like gravity.

On-screen movement

Arc upward Arc downward

In-and-out screen movement

Independent movement Relative movement

Movement within screen bounds

The movement of an element between two points within the bounds of the screen follows a natural, concave arc. All on-screen movements use the standard curve.

Arc upward

1. Rising against gravity in the real world requires effort.
3. Elements moving upward on the screen should similarly depict effort during acceleration through a slower upward movement.

Arc downward

1. Falling elements in the real world are accelerated by gravity.
2. Elements moving downward on screen should depict less effort through a faster downward movement.

When not to Arc

Elements moving along a single axis (either horizontally or vertically, but not both) do not follow an arc.

Movement in and out of Screen bounds

Independent movement

Elements entering and exiting the screen are referred to as independent elements as they don't affect the position of other on-screen content.

Entering the screen

Elements entering the screen use the deceleration curve for a speedy entrance, indicating that they had been travelling at peak velocity.

Permanently leaving the screen

Elements permanently leaving the screen use the acceleration curve to speed off-screen over a slightly shorter duration, as they will not be returning and require less user focus.

Temporarily leaving the screen

Elements temporarily leaving the screen should use the sharp curve, as they may return to the screen at any time and should appear nearby and within reach.

Relative movement

Entering or exiting elements that move other on-screen elements do so along a smooth easing curve, so that they remain minimally disruptive and avoid eye-catching, dramatic movement. The standard curve is used for moving elements both in and out of the bounds of the screen. This curve has a slightly longer duration compared to independent elements.

Transforming Material

Material can make surfaces feel alive by multiplying and dividing them, and changing their shape and size.

Types of Transformations :

Rectangular transformation :

1. Asymmetric
2. Symmetric

Radial transformation :

Symmetrical and circular

Rectangular Transformation :

When material changes shape and size, its width and height change asynchronously along a motion curve. These changes are choreographed with nearby surfaces inside or around the changing element.

Transforming width and height

Elements may be expanded or collapsed using either asymmetric or symmetrical width and height changes.

Asymmetric transformations involve the width and height changes at different rates. They work best when multiple elements or position changes are involved.

Symmetrical transformations involve width and height changes occurring at the same rate. They are better for changes to a single element that occur along a single axis.

Radial Transformation

Radial transformations are symmetrical, circular visualizations that originate from a user’s point of touch. They are commonly used on circular surfaces that morph into other shapes.

Transformations can originate either from the object’s current location or from the center of the final surface being formed.

Joining & Dividing

JOining :

Material may join with other material, or it may divide into multiple pieces. As two pieces of material approach one another, their edges meet and margins overlap before the movement completes.

Dividing :

When material divides into multiple pieces, the pieces begin separation at the start of the movement.

Shadows :

Shadows from separated material do not appear above sibling elements.

Choreography

Material in motion guides the user’s focus through interactions by sharing elements across transitions.

Surface creation :

Stagger the choreography of new surfaces being created.

Radial reaction :

Connect user input to surface reactions with touch ripples.

Continuity :

Maintain a clear focal point during transitions by carefully selecting the number and type of elements shared across the transitions.

All content elements are shared :

While a surface is expanding, a significant number of elements should remain visible during the transition.Complex transitions should keep a single element visible.

Few or no content elements are shared :

While expanding a surface, if only a single element will be present after the transition, that element should be the focal point of the transition, controlling all other elements.

If there are no shared elements between views, anchor all crossfading elements to the surface’s vertical movement. The surface crops the content within.

------------- PENDING----------------