animate

Use a strong custom ease-out cubic-bezier curve for entering elements, keep durations under 300ms, and animate only transform and opacity. Start entrances from scale(0.9-0.95) with opacity 0 rather than scale(0).

Use Framer Motion for real spring physics, interruptible gestures, layout animations, shared-element transitions via layoutId, and exit animations with AnimatePresence. Prefer CSS for hovers, simple enter/exit states, and looping motion.

Jank usually comes from animating layout properties like width, height, or margin instead of transform and opacity, or from easing curves that are too weak. Switch to a steeper custom curve and GPU-composited properties.

Set stroke-dasharray so one dash covers the path length, offset it by the full length to hide the stroke, then animate stroke-dashoffset to zero. Use pathLength="100" to normalize values and animation-fill-mode: forwards to keep the end state.

Replace movement and position changes with gentle opacity or color transitions rather than removing animation entirely. In Framer Motion use useReducedMotion() or MotionConfig reducedMotion="user" to animate only opacity app-wide.

Exit animations require a unique key on the motion element inside AnimatePresence; without a key the component never unmounts and the exit never fires. Also pass custom props to both AnimatePresence and the motion element to avoid stale values.