interaction-design

Use Framer Motion's motion components with whileHover and whileTap props for instant feedback, combined with spring transitions like stiffness 400 and damping 17. For state changes, wrap conditional content in AnimatePresence to animate enter and exit.

Framer Motion suits declarative UI animations, gestures, and layout transitions with its React-native API. GSAP excels at complex timelines, scroll-triggered effects via ScrollTrigger, and text splitting, but requires manual cleanup with gsap.context in useLayoutEffect.

Check the prefers-reduced-motion media query with window.matchMedia and set animation duration to zero when matched. In CSS, wrap all animations in a media query that forces duration to 0.01ms so users with motion sensitivity see instant state changes.

Jank occurs when animating layout properties like width, height, top, or left, which trigger reflow. Animate only transform and opacity for GPU-accelerated 60fps motion, and use will-change sparingly to hint the browser.

Use an Intersection Observer hook to detect when elements enter the viewport, then apply transition classes or Framer Motion animate props. For scroll-linked effects like parallax, map useScroll progress to transform values with useTransform.