ui-animation

The best way to implement UI animation is by animating `transform` and `opacity` properties. This approach ensures GPU acceleration, maintaining smooth performance while providing purposeful motion and user feedback.

To make framer-motion animations accessible, implement `prefers-reduced-motion` behavior. This ensures users who disable motion in their system settings receive non-jarring transitions or static UI states instead of spring animations.

Use CSS transitions for simple state changes like hover effects, and use keyframes for continuous or multi-step animations. Both are covered for UI motion, with specific easing defaults provided for enter and transform-based animations.

Yes, this UI motion approach works with spring animations. It provides specific rules and examples for implementing spring physics using framer-motion, ensuring animations feel natural while adhering to performance and accessibility guidelines.

Your UI animation feels jarring because it lacks purposeful easing defaults. By following core rules for clarity and applying specific easing defaults for enter and transform-based animations, you can create smooth, non-jarring transitions.