Best practices

• Use spring for interactive motion; tween for staged sequences
• Keep exit animations subtler than enter animations
• Split enter animations into semantic chunks and stagger lightly
• Animate contextual icon swaps with opacity + scale + blur instead of hard replacing
• Use useReducedMotion() to respect accessibility preferences
• Prefer layoutId for shared layout animations across routes

Compatibility & integration (updates)

• View Transitions API: Modern Chromium-based browsers (Chrome 147+ and friends) now support concurrent, nested, and element-scoped view transitions. When available, prefer the native View Transitions API for route and large-scale UI transitions; it can provide smoother, lower-overhead transitions than JS-driven approaches. Use Framer Motion (layoutId) or AnimatePresence as a progressive enhancement/fallback for browsers that don't support the API.

• React ecosystem: React 19 and related tooling (Activity, useEffectEvent, etc.) continue to evolve. React's experimental work on view transitions (React Labs) aligns with the browser API — test your Motion transitions with the React versions you target. The React Compiler (stable) can change build-time behavior; verify Motion-based transitions during your build step.

• Build & migration: Create React App has been deprecated for new apps. If you're migrating to Vite, a framework, or another build tool, Framer Motion works with standard bundlers; ensure your dev server and SSR setup (if any) preserve client-side hydration for transition effects.

• Scroll-driven animations: Chrome has added experimental scroll-triggered animation features. For simple, declarative scroll-driven effects prefer IntersectionObserver + whileInView/useInView or native browser features where supported. For timeline-based scrubbing, GSAP remains the pragmatic choice.

Performance tips

• Prefer transforms (translate/scale/rotate) and opacity for animations; avoid animating layout properties where possible
• Use will-change sparingly to hint at upcoming changes
• Memoize animated components to avoid unnecessary re-renders; avoid heavy synchronous layout work during animations
• Use layout and layoutId selectively — they trigger layout measurement; group items or limit to elements that truly need shared layout transitions
• Test with reduced-motion settings and on representative devices; measure LCP and frame drops when adding large transitions

Community patterns

• Shared element transitions: use layoutId on paired elements across routes for smooth shared transitions; combine with the View Transitions API when supported
• Staggered entrance patterns: create parent variants that stagger children; keep stagger durations short for snappy UI
• Combining native and JS transitions: use View Transitions for the heavy lifting and Framer Motion for micro-interactions and stateful animations
• Accessibility-first: always provide reduced-motion fallbacks and avoid motion that causes reflow-induced layout shifts

Migration notes

• If starting a new project, prefer modern build tooling (Vite, RSBuild, or framework toolchains) over CRA
• When upgrading React or adopting the React Compiler, run visual regression tests for transition-heavy UI