Motion brings life to static objects - it facilitates focus and can create rhythm. It can guide users through a workflow, enable decision-making and provide cues to take action
Motion in interactive applications can help increase productivity and guide users through complex tasks. Used sparingly, it has the ability to ease complex workflows and help reinforce structure and hierarchy of application elements and levels.
Use natural movement as much as possible
Follow-through and overlapping action: nothing starts or stops all at once
- Easing in and out: everything takes time to speed up and slow down
- Linear movement should be used sparingly, especially to illustrate quantifiable progress (i.e. 40 of 100 items complete)
The 'feeling' of animations should range between organic and technical depending on the context and purpose
For all motion there is propulsion causing the movement of an object. Always keep in mind the object's mass, as well as the force projecting the object forward
Motion should follow logical expectations of movement; subtle, restrained animations are more effective than overly complex ones.
Motion is an effective tool to provide users with feedback for their actions. It can cause confusion when motion is used in an application without a user taking an action to cause it. As such, limit the use to initial page load or to provide visual feedback to a user for an action they have taken.
Transitions, especially while loading, should be applied to the smallest component possible. For instance, using a skeleton state animation while loading cards in-place is better than a single loading transition for the entire set.
Don't do anything crazy, in short.
Motion should reinforce existing application hierarchy and structure. Use subtle translations and movements together with application levels. Mostly, elements should be invoked and dismissed from where a user takes action.
Movement should be slow enough that the user can recognize what's happening, but fast enough that they are never waiting. The magnitude of change in an animation and its importance combine to determine its duration. Most transitions should fall between 100 and 600 milliseconds depending on context and object mass.
The table below displays recommended millisecond durations for components and elements.
|100 - 200ms||Buttons, toggles, small components|
|300 - 400ms||Alerts, card sorting, reordering|
|400 - 500ms||Panels and modals|
|500 - 600ms||Page loads and large components|
Easing specifies the rate of change of an object over time. Objects in real life don’t just start and stop instantly. Therefore, the easing principles provided below will guide you on how page elements will behave in their natural environment. It’s good to keep in mind mass when easing, as larger objects take longer to speed up vs smaller objects. A rule of thumb: when in doubt, ease in and out.
The table below displays recommended easing motion for components and elements.
|Motion type||Easing type|
|Entering screen||Ease out|
|Exiting Screen||Ease in|
|Color / opacity change||Linear|
|Movement within screen||Ease in-out|