emil-design-eng

Review UI animation code by enforcing a markdown Before/After/Why table format that catches janky transitions, wrong easing, and overdone motion. This process evaluates interaction frequency to determine correct duration limits and applies transform/opacity-only rules for invisible-correct component motion.

Choose easing and duration for component motion by basing decisions on interaction frequency and purpose, avoiding sluggish ease-in and scale(0) entrances. Taste-driven animation rules enforce specific duration limits and spring reasoning for gesture-driven elements to ensure interfaces feel intentional.

Handle accessibility-aware animation by respecting the prefers-reduced-motion constraint across buttons, tooltips, popovers, and toasts. This ensures interactive feedback and component motion remain usable without triggering vestibular issues, applying interruptible transitions only when appropriate.

CSS transition feels janky because transition: all animates non-transform properties, causing layout thrashing instead of smooth motion. A code review enforces transform/opacity-only animation principles and interruptible transitions to prevent sluggish rendering and ensure responsive interactive feedback.

Avoid ease-in for popover and tooltip animations when elements need to feel responsive, as ease-in creates a sluggish start. Use taste-driven easing rules instead, ensuring correct popover origins and appropriate duration limits for component interactions that feel invisible-correct.

Use spring physics for gesture-driven UI animations to create natural, interruptible transitions that respond correctly to user input. Implementation principles apply spring reasoning specifically to gesture-driven motion, while standard component motion relies on defined easing curves and duration limits.