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 with the product, making it more comprehensive and enjoyable to use. 

Kendo Motion system provides 17 duration tokens and 7 easing tokens that combine into 26 predefined transition variables available to be applied across Kendo components and UIs they are used within. 

These transitions follow main principles of web animation: 

• Purposeful use – transitions should be applied carefully, intentionally, reinforcing the user experience rather than disrupting it; 
• Physics – transitions should mimic real-world movement to make the interface feel more intuitive and natural; 
• Timing and Rhythm – the speed at which elements transform, or move should relate to their size; smaller elements change and move faster, while larger ones transition at a slower pace; 
• Consistency – elements and components of similar size and function should use the same transitions to create a cohesive experience; 
• Accessibility - Kendo motion system provides option to reduce motion for motion-sensitive users. 

Duration Tokens

• Instant duration – used for instant response without waiting; transition performs with no delay. 
• Short durations – summarizes immediate, brief, quick, and rapid duration tokens – useful for subtle animations, quick transitions, or brief pauses to improve perceived responsiveness without noticeable lag. Used mainly for micro-interactions that require immediate feedback, such state changes; 
• Moderate durations – summarizes swift, speedy, brisk, and prompt duration tokens – suitable for standard animations, feedback responses, or smooth transitions that need to be perceptible but not slow. Used for most standard UI animations such as ExpansionPanel, short-distance movements like dropdowns menu opening, or Notification appearing. 
• Noticeably delayed durations – summarizes timely, moderate, measured, and steady duration tokens – appropriate for longer animations and important transitions that takes significant part of the screen such as loading indicators, or full-screen modal transitions, these durations give users enough time for the users to perceive a change. 
• Longer durations – summarizes leisurely, slow, languid, and sluggish duration tokens – create deliberate pauses and are used sparingly across UIs to emphasize on a deliberate, extensive, or decorative animations. 

[TODO: Insert table with duration tokens] 

Easing Tokens

Easing curves are mathematical functions that define illustrate 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 enables users to achieve appropriate movement for the components according to their size, the context they are used within, and with interaction with other components. 

• linear (cubic-bezier(0, 0, 1, 1))—Recreates straight line movement, no easing; 
• accelerate (cubic-bezier(0.42, 0, 1, 1))—Movement starts slowly and accelerates towards the end; 
• decelerate (cubic-bezier(0, 0, 0.58, 1))—Movement starts fast, then slows down; 
• standard (cubic-bezier(0.42, 0.0, 0.58, 1.0))—Movement with smooth acceleration and deceleration; 
• sharp (cubic-bezier(0.75, 0.0, 0.25, 1.0))—Movement with more pronounced acceleration/deceleration; 
• bounce (cubic-bezier(0.68, -0.55, 0.265, 1.55))—Simulates bouncing motion, like a ball hitting the ground; 
• elastic (cubic-bezier(0.5, -0.5, 0.5, 1.5))—Creates a spring-like motion, overshooting and oscillating before settling. 

[TODO: Insert table with easing tokens] 

Transition Variables

Transition variables are predefined combination of duration and easing tokens used across components to indicate state or size change, mode switching and movement across screen. Kendo motion system provides 26 transition variables applicable at component and page-level.  

They are grouped according to motion principles for speed, personality, subtlety, visibility, and scale. Hierarchy-wise they are used on component level to provide micro-feedback, indicate speed and responsiveness, and on page-level to indicate context change and facilitate user orientation. 

Speed and Responsiveness

Transitions that convey quick feedback or immediate action: 

• instant—Immediate transition with no delay; 
• rapid—A fast, immediate transition conveying urgency or energy, used for quick state transitions (for smaller components and elements); 
• snappy—A quick, crisp action that grabs attention without lingering, suitable for state transitions (for slightly bigger components and elements); 
• energetic—Dynamic movement with lively feel that adds vibrancy to interactive elements. 

Personality and Playfulness 

Transitions that add character or dynamic flair: 

• bouncy—Movement with overshoot and settle that implies playfulness and provides engaging feedback; 
• pulse—Rhythmic expansion and contraction, mimicking a heartbeat or breathing-like pattern, often used for loaders, notifications, and alerts; 
• emphasis—Transition that draws attention to an element and calls to action; 
• flip—Recreates rotation of an element around Y or X axis and enhances visual interest during transitions. 

Subtle & Natural 

Transitions that feel smooth and unobtrusive, mostly used on a page level: 

• subtle—Minimal, almost imperceptible motion, that feels natural and is suitable for calm, unobtrusive UI; 
• gentle—Soft, reassuring movement, appropriate for onboarding or sensitive context; 
• smooth—Seamless, flowing transition that glides effortlessly through the page; 
• fluid—Continuous, flowing motion that resembles liquid movement; 
• settle—Transition that sets an element into its final positioning/state; 
• deliberate—Slow and intentional movement that conveys importance or gravity. 

Visibility & Movement Change 

Transitions that indicate movement and visibility for entering or exiting elements: 

• enter—Movement that indicates new content introduction such as an element appearing in view; 
• exit—Recreates removal of an element out of view or completion of a process; 
• fade-in—Simulates gradual opacity increase by creating soft, non-intrusive entry; 
• fade-out—Simulates gradual opacity decrease by ensuring smooth exit without abruptness; 
• slide-in—Recreates entry with deceleration that feels natural and guided; 
• slide-out—Recreates exit with acceleration that conveys quick dismissal.  

Size & Scale Adjustments 

Transitions that affect size and dimensions: 

• scale-in—Transition that recreates gradual increase of an element for emphasis or depth, often used for appearing modals; 
• scale-out—Transition that recreates gradual decrease of an element to de-emphasize, often used for closing modals; 
• grow—Transition that expands element from smaller to larger size by emphasizing the change; 
• shrink—Transition that contracts element to smaller size by de-emphasizing it, creating the illusion of its removal, or receding. 
• expand—Transition that extends an element horizontally or vertically, while efficiently reviling the content within, especially suitable for panels or menus; 
• collapse—Transition that reduces horizontally or vertically an element, while efficiently hiding the content within.  

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