motion-design

UI animations and micro-interactions maintain performance by exclusively animating CSS `transform` and `opacity` properties, avoiding layout thrashing. This approach ensures smooth 60fps transitions for button presses, toggles, and hover effects.

Smooth page transitions are created using CSS and the View Transitions API. This Skill provides specific patterns for sliding and fading between views or pages, ensuring seamless navigation while maintaining animation performance.

Scroll-triggered animations and stagger effects for lists are implemented by applying purposeful duration guidelines and easing functions. This Skill covers grouping list items to animate sequentially, creating cascading entrance transitions.

Yes, reduced motion preferences are supported. The Skill includes specific guidance on respecting user accessibility settings by disabling or minimizing animations, ensuring UI transitions remain usable for motion-sensitive individuals.

Smooth loading animations, including spinners and skeleton loaders, are achieved by animating only `transform` and `opacity`. This performance optimization technique prevents browser repaints and ensures fluid loading indicators.

Micro-interactions are needed to enhance user experience during button presses, toggles, and hover effects. This Skill applies core animation principles and duration guidelines to provide clear visual feedback for these specific interaction patterns.