---
path: foundation/motion/overview
title: Overview
position: 1
seo_title: Overview of Motion
seo_description: >
Learn more about the Kendo Motion system - a comprehensive guide to using
duration and easing tokens for smooth, intuitive UI animations. Explore
predefined tokens and variables and learn about motion principles and best
practices to enhance user experience with purposeful, accessible 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](/themes/kendo-themes/default/customization/#accessibility-and-reduced-motion) documentation.
### Theme-Specific Variables
For specific information about the motion system, refer to the theme-specific variables list:
