Motion

Motion

Motion plays a crucial role in creating a dynamic and engaging user experience. When used thoughtfully, motion can enhance usability, provide feedback, and guide users through the interface. This page outlines our motion guidance for the Canvas Design System.

Principles

The Canvas motion system is guided by the following principles:

• Fast: Motion should be quick and responsive, providing context to user actions without causing delays or interrupting the user’s flow. Strive for efficiency.
• Simple: Motion should be used to simplify interactions and create a seamless user experience. It should aid comprehension and guide users intuitively. Prioritize clarity and avoid complexity.
• Purposeful: Motion should have clear intent and contribute meaningfully to the user experience. It should be used strategically to enhance usability, provide feedback, and guide users.

Implementation

Effective motion design requires careful implementation. Here’s how we apply motion.

• Purposeful Application: Motion should be applied purposefully to enhance usability and provide feedback. Each motion element should have a clear reason for its inclusion. Avoid unnecessary or excessive animations that may overwhelm or distract users. Consider the user’s cognitive load and prioritize essential animations.
• Subtlety: Effective motion design is often subtle and feels natural to the user. Animations should be seamlessly integrated into the interface, enhancing the user experience without drawing attention to themselves. They should feel intuitive and seamless.
• Performance: Consider the performance implications when implementing motion, especially on resource-constrained devices. Optimize animations to ensure smooth interactions for users. Prioritize efficient code and avoid negatively impacting system performance.
• Platform Consistency: To maintain a consistent user experience across different platforms, adhering to platform-specific motion guidelines is recommended. When designing for iOS or Android, and not creating custom or bespoke interactions, utilize the standard easing, durations, and transitions provided by the respective platform. This ensures that the motion on that platform feels familiar and predictable to users. Refer to the Human Interface Guidelines for iOS and Material Design guidelines for Android for detailed platform-specific guidance.

Easing defines how an element moves overtime during an animation. It defines the feel and perception of motion. The Canvas motion system utilizes two primary easing sets to ensure consistency and clarity in user interface interactions.

Quick Easing

Used for smaller interactions with shorter durations, such as button presses and checkbox selections. This easing set prioritizes speed and efficiency.

Quick - (0.20, 0.00, 0.20, 1.00) - Example & Compare

cubic - bezier(0.2, 0, 0.2, 1);

Quick Acceleration - (0.40, 0.00, 0.95, 0.80) - Example & Compare

cubic - bezier(0.4, 0, 0.95, 0.8);

Quick Deceleration - (0.05, 0.40, 0.30, 1.00) - Example & Compare

cubic - bezier(0.05, 0.4, 0.3, 1);

Purposeful Easing

Used for larger movements and transitions, such as expanding cards, modals, and banners. This set prioritizes smoothness and a more deliberate feel. It ensures motion has a clear purpose and guides the user effectively.

Purposeful - (0.35, 0.00, 0.05, 1.00) - Example & Compare

cubic - bezier(0.35, 0, 0.05, 1);

Purposeful Acceleration - (0.40, 0.00, 0.80, 0.30) - Example & Compare

cubic - bezier(0.4, 0, 0.8, 0.3);

Purposeful Deceleration - (0.00, 0.40, 0.20, 1.00) - Example & Compare

cubic - bezier(0, 0.4, 0.2, 1);

By using these easing sets consistently, we can create motion that feels purposeful and well-integrated within the Canvas system.

Animation duration should reflect the distance and complexity of the movement. Shorter durations create a sense of responsiveness, while longer durations can emphasize transitions or provide more deliberate feedback. It’s also important to consider the animation. For example, mobile devices typically benefit from shorter durations to maintain a snappy feel; animations rarely need to exceed 500ms on mobile. Here are some duration examples.

• Instantaneous: 50ms - 150ms - For very quick, almost immediate reactions.
• Small Movement: 200ms - 300ms - For smaller UI elements and short transitions.
• Large Movement: 350ms - 500ms - For larger elements, screen transitions, and more complex movements.
• Extra Large: 600ms - 1000ms - For larger screens or specific use cases, reserved for significant transitions or movements, primarily on larger screens.

Transition Types

Transitions are used to guide users between different states and screens. They should be smooth, intuitive, and consistent with the overall user experience. Well-designed transitions help users understand interface relationships and maintain context. There are several common transition types.

• Entering and Exiting: Indicate when an element enters or leaves the screen. This helps users understand the structure of the interface and maintain awareness of changes.
• Top-level Navigation: Used for transitions between major sections of the application. These transitions should be distinct and provide a clear sense of hierarchy.
• Lateral Transitions: Facilitates movement between screens or tabs at the same hierarchical level. These transitions should be consistent and predictable to avoid disorientation.
• Emphasis: Draw attention to specific elements or changes in state. Use motion to highlight important information or guide the user’s focus.
• Forward and Backward Navigation: Support clear navigation flow and allow users to easily retrace their steps. Maintain a consistent visual language for navigation transitions.
• Skeleton Loaders: Provide visual feedback while content is loading. This improves the perceived performance and reduces user frustration.
• Transforming Containers: Handle changes in container size and layout. These transitions should be smooth and help users understand the spatial relationships between elements.

Easing and Duration Pairings

Selecting the appropriate easing and duration is crucial for creating smooth and effective transitions. To simplify this process, we’ve identified pairings that work well in most situations.

Choreography

Choreography involves coordinating the movement of multiple elements to create cohesive and harmonious animations. Plan and synchronize the movements of individual elements to ensure motion is smooth and visually appealing. Consider the timing, easing, and relationship between elements to create a sense of rhythm and flow.

Accessibility

To ensure motion is accessible to everyone, we recommend adhering to these guidelines:

• Provide Alternatives: Offer alternative experiences for users who prefer reduced motion or have difficulty perceiving animations. These alternatives should rely on clear visual cues and transitions without excessive movement.
• Avoid Harmful Patterns: Avoid animation patterns that may trigger vestibular disorders, such as rapid flashing or excessive strobing.
• Ensure Clear Visuals: Maintain sufficient contrast between animated elements and their background. Provide clear visual indicators of changes in state or transitions, even when motion is used.

This approach promotes inclusivity and ensures a positive experience for all users, regardless of their abilities or preferences.

To further your understanding of accessibility and motion design, we recommend exploring these resources:

• Nielsen Norman Group - Animation & Duration
• Designing Safer Web Animation For Motion Sensitivity by Val Head
• Mozilla mdn web docs - Prefers Reduced Motion

Fading

Fades can be used to create smooth transitions and improve accessibility. In situations where motion may be problematic, fades can provide a subtle alternative for transitions and visual feedback. They can also be used to manage complexity and reduce cognitive load.

Device Constraints

Canvas prioritizes accessibility and performance across a wide range of devices. To ensure a consistent and optimal experience, we adhere to the following guidelines:

• Desktop Motion: On desktop platforms, we recognize that excessive animation can be overwhelming and visually distracting. Canvas employs motion selectively on desktop, prioritizing clarity and user focus.
• Mobile Motion: To maintain a cohesive experience on mobile devices, Canvas utilizes platform-standard easing, durations, transitions, and motion guidelines provided by the operating system for existing components and containers. This ensures consistency with user expectations and optimizes performance.
• Alternative Transitions: Canvas acknowledges that some devices may have limited processing capabilities. In these cases, we utilize alternative transition styles, such as fades, to ensure a smooth and accessible experience across all devices.
• System Performance: Canvas is mindful of the potential impact of animation on system performance, particularly on desktop platforms and within certain codebases. To mitigate this, we recommend prioritizing CSS transitions and keyframe animations, with a focus on animating the transform and opacity properties. These properties are typically hardware-accelerated, leading to smoother and more efficient animations. Additionally, we optimize code to minimize performance overhead and maintain a responsive user interface.