interaction-design

Use Framer Motion's motion.button with whileHover and whileTap props for scale feedback, combined with a spring transition like stiffness 400 and damping 17. This gives immediate tactile feedback on hover and click without blocking user input.

Framer Motion suits declarative React animations, gestures, and layout transitions with AnimatePresence. GSAP excels at complex timelines, ScrollTrigger parallax effects, and text splitting where imperative control over sequencing is needed.

Check the prefers-reduced-motion media query with window.matchMedia and set animation duration to zero when matched. Also add a CSS media query that forces animation-duration and transition-duration to 0.01ms globally.

Janky animations usually come from animating layout properties like width, height, top, or left, which trigger reflow. Animate only transform and opacity, and use will-change sparingly to hint GPU acceleration.

Use an Intersection Observer hook to detect when elements enter the viewport, then trigger transitions or Framer Motion animations. For scroll-linked effects like parallax, use Framer Motion's useScroll and useTransform or GSAP ScrollTrigger.