Fios TV | Motion Foundation

Roles

About the project

Easing
Easing adjusts an animation’s speed over a specific period of time, allowing transitioning elements to speed up and slow down, as opposed to moving at a fixed rate.

Objects don’t start or stop immediately in the real world. They take time to speed up and slow down. Easing is the technique of making elements move in a natural way, considering friction, gravity, volume and mass are at work.

Transitions without easing look rigid and mechanical, while a transition with easing is more nostalgic of natural movement.

Standard easing
Use standard-easing for all transitions unless stated otherwise.

CSS
cubic-bezier(.3,.0,.2,1)

After Effects
Out: 30%, In:80%

Please note: Opacity has always a Linear Ease.
Easing should be applied to all transformation attributes except opacity

Duration

Irrespective of the transition method, transitions should not be slow or so fast they jar user experience. A strong combination of duration and easing delivers smooth and clear transitions.

Exit/Entry or Entrance/Open
If a transition is used to dismiss, close or collapse an element use shorter durations. These transitions tend to be faster because they demand less attention than the next task the user will face.

In contrast, if a transition is used to enter, open or expand an element use longer durations. These transitions are slower because they are leading the user into new territory and should be used as a method of wayfinding through the product.
Space
Transitions that cover small areas of the screen use shorter durations than those that span larger areas. This is to avoid creating a jarring motion. To achieve equal velocity distance covered over time, must be relative.

Choreography

Transition choreography is a harmonised combination of transitions that play out in sequence to hold the user’s attention whilst UI changes. This should be used to assist wayfinding within the product to achieve user goals.

Sequence
A sequential transition can be a wayfinding tool that can guide the user to the next relevant information, move through stages of onboarding or simply select the next item of curated recommended content.

Transform
How transformation properties are used is very important towards smooth element transitions. The more properties changed increases the complexity of the transformation. As a guide, when dealing with multiple elements it is best to place them in a container and apply the transitions to the container.

Focus
Focal points make it easier for users to navigate through the product. By design, transitions including multiple elements should use choreography for wayfinding relying on clear focal elements whilst performing transitions so the user does not get lost.

Thanks for viewing!