Motion

Overview of Motion

Motion system is a powerful tool to provide context and feedback, to indicate changes, and to draw attention to the important parts on the screen. Used wisely, animations could enrich the user experience, making the product more comprehensive and enjoyable to use.

Kendo Motion system provides duration tokens and easing tokens that combine into transition tokens available across Kendo components and UIs.

Duration Tokens

Duration tokens range from instant to sluggish. Use shorter durations for micro-interactions and quick feedback, moderate durations for standard UI animations, and longer durations for important transitions that occupy significant screen space.

Easing Tokens

Easing curves are mathematical functions that define how the animation occurs for a set period. As in physical world objects rarely move in a linear manner, easing aims to recreate more natural, organic movement. Instead of moving robotically with constant speed, easing curves enable developers to achieve appropriate movement for the components according to their size, the context they are used within, and with interaction with other components.

There are 7 easing functions, each with distinct characteristics:

Transition Tokens

The Telerik and Kendo UI Motion System provides transition tokens, whose values are combination of duration tokens and easing tokens.

These tokens are organized into five categories based on their purpose and visual effect:

• Speed and Responsiveness—transitions that convey quick feedback or immediate action, used primarily for micro-interactions at the component level.
• Personality and Playfulness—transitions that add character or dynamic flair, often incorporating bounce or elastic easing for engaging feedback.
• Subtle & Natural—smooth and unobtrusive transitions, mostly used at the page level for seamless, flowing motion.
• Visibility & Movement Change—transitions for entering or exiting elements, including fade and slide variations.
• Size & Scale Adjustments—transitions that affect element dimensions, such as scaling, growing, expanding, and collapsing.

Key Principles

Motion is a fundamental component in design that helps communicate state changes, guide user attention, and create engaging interactions. The Kendo Motion system endorses several basic principles related to motion:

• Purposeful and Intentional—Motion should serve a clear purpose, whether providing feedback, guiding focus, or indicating state changes. Avoid gratuitous animations that distract rather than enhance the user experience.
• Natural and Physics-Based—Transitions should mimic real-world movement with appropriate acceleration and deceleration. This creates intuitive interactions that feel familiar and reduce cognitive load.
• Contextual and Proportional—The speed and style of motion should relate to the element's size and importance. Smaller elements move faster, while larger or more significant transitions deserve more deliberate timing.
• Consistent Application—Similar interactions and elements should use the same motion patterns to create a predictable and cohesive experience throughout the interface.
• Accessible and Inclusive—Motion should be designed with accessibility in mind, providing options to reduce or disable animations for users who are motion-sensitive or prefer reduced motion.

By applying motion thoughtfully and intentionally—guided by the principles outlined above and supported by the provided tokens—you can craft interfaces that feel intuitive, engaging, and inclusive, ultimately enhancing the overall user experience.

Accessibility

The Kendo Motion system is built with accessibility as a core consideration. It automatically respects user preferences for reduced motion through the CSS prefers-reduced-motion media query, ensuring that users who are sensitive to motion or have vestibular disorders have a comfortable experience.

When a user enables reduced motion settings in their operating system, all animations are automatically minimized to near-instant transitions. This ensures:

• Improved accessibility by respecting user motion preferences
• No additional configuration required from developers
• Preserved functionality as only timing changes, not the underlying interaction patterns

For detailed information on how to customize or manually control the reduced motion behavior, refer to the Motion Customization documentation.

Theme-Specific Variables

For specific information about the motion system, refer to the theme-specific variables list:

Motion for DefaultDiscover the Telerik and Kendo UI Default theme motion variables list.

Motion for BootstrapDiscover the Telerik and Kendo UI Bootstrap theme motion variables list.

Motion for MaterialDiscover the Telerik and Kendo UI Material theme motion variables list.

Motion for FluentDiscover the Telerik and Kendo UI Fluent theme motion variables list.

Motion for ClassicDiscover the Telerik and Kendo UI Classic theme motion variables list.