animate

Frontend animation requires applying a motion budget to stagger timing and restrict unnecessary transitions. You can refine UI motion by using CSS keyframes by default or a stack-specific library when opted in, ensuring transitions enhance usability and clarity without overwhelming the user interface.

Modal transitions and scroll reveals are best handled by applying stagger timing and motion budgets. You should use stack-appropriate tools like CSS transitions for simple reveals or Motion for complex React interactions, while ensuring correct library usage without mixing tools on the same properties.

UI animation must support reduced-motion preferences to maintain accessibility. Implementing reduced-motion respect ensures that users who have disabled animations experience instant state changes or minimal transitions instead of motion-heavy effects, passing usability and accessibility checks.

GSAP and Three.js can be used for 3D UI animation, but you must avoid mixing libraries on the same property. The correct approach involves using a decision ladder to select one library per animated property, ensuring performance and preventing motion conflicts in complex frontend animations.

Hover state animation fails usability checks when it ignores motion budgeting or applies excessive transition timing. To fix this, evaluate the animation using a decision ladder to remove transitions that degrade performance, then apply appropriate CSS transitions or stack-specific motion tuning.

CSS transitions should not be used for frontend animation when a user has opted into a stack-specific library like Motion, GSAP, or Three.js. A decision ladder helps determine when to switch from CSS keyframes to a dedicated motion library for complex UI patterns.