태그: framer-motion

Motion design skill built on the ideas of design engineers Emil Kowalski, Jakub Krehel and Jhey Tompkins: builds animated UI components for your project type, or audits existing animations in an HTML report with looping demos. Use in a coding agent on a local frontend project.

Implements page and route transitions in the Next.js App Router and fixes Framer Motion exit animations that never fire on navigation, using template.tsx with a pathname-keyed AnimatePresence and FrozenRouter, or the View Transitions API via next-view-transitions.

Applies tiered prefers-reduced-motion handling instead of disabling everything: removes vestibular triggers like parallax and scroll hijacking, softens large movement into short fades, and keeps essential motion. Covers CSS and JS gating for GSAP, Framer Motion and Lenis, per WCAG 2.3.3.

Adds functional UI micro-interactions with Framer Motion (motion/react) and modern CSS: hover and press feedback, toggles, toasts, drawers, modals, list reorder and shared-element transitions, with 100-250ms timings, asymmetric enter and exit easing, and reduced-motion support.

Audits Motion (Framer Motion) code against AnimatePresence rules: wrapping conditional exits, exit props and keys, the useIsPresent and usePresence hooks, choosing a mode, and coordinating nested exits. Reports findings as file:line. For React projects.

Guides the agent in building SVG icon components that morph between any two icons by moving lines instead of crossfading. Every icon uses exactly three lines, unused ones collapse to the center, and grouped variants rotate with springs. Examples use React and Motion and respect reduced motion.

Audits animation code for the right timing function: springs for gestures and interruptible motion, easing for system-driven state changes, linear for progress, and no animation for high-frequency interactions. Also checks spring parameters and durations. Reports file:line findings.