Motion

Beta

Motion System

The motion system is a set of reusable transition patterns that can easily be applied to various UI elements. They help users understand the app and provide delightful experiences.

Overview

Before you start

Just because you can add animations, does not mean you should. Please consider impact on performance and user experience before using this library.

The library is built using Angular Animations and contains exportable triggers and animations.

Sample usage:

Triggers have predefined states and can be used directly into templates.

While animations can be used if custom triggers and states are needed.

<div @myCustomAnimation>...</div> trigger('myCustomAnimation', [ transition('* => active', [useAnimation(fadeInOut)]), ]);

Easing and Speed

Easing functions specify the acceleration or deceleration of motion over time. Like objects in the real world, movement rarely happens at a constant speed. As such, choosing the right easing function is crucial to produce animations that feel natural and fluid.

The animation functions in the library have their pre-defined easing function and duration, but can be overridden when needed.

Below are some of the CSS keywords which you can visualize and compare in easings.net.

Ease-out

This animation begins quickly and slows down which gives a feeling of responsiveness. Useful for user actions that require instant reaction like menus and buttons.

Duration should generally be set around 200ms to 500ms.

Ease-in

Conversely, this animation starts slowly and accelerates. This might feel a little unnatural because of the sudden stop. Could be useful to animate elements that are moving out.

Duration should generally be set around 200ms to 500ms. This can be perceived as too slow when used with long durations.

Ease-in-out

This has a slow start, fast middle and slow end. Could provide a dramatic effect when used correctly.

Duration should generally be set around 300ms to 500ms. Like ease-in, this can be perceived as sluggish with long durations.

Linear

This tends to feel robotic and unnatural. Generally speaking, this should be avoided.

These are just general guidelines and the right easing and duration might differ between projects. In some cases, you might need to go completely custom by writing your equations (cubic-bezier). Experiment and choose what feels right and natural.

Performance

Animations are not cheap. Even when optimized, they still have computational costs, and might lead to jarring experience.

Animate the right property

When writing animations, either in CSS or JS, use opacity or transform properties whenever possible. In fact, try to limit it to those properties.

Some properties are more expensive to animate and can cause a "reflow" avalanche. See CSS triggers for more details.