motion-design

To add web animations without performance jank, limit motion to GPU-accelerated properties like transform and opacity. This avoids layout and paint thrashing, ensuring smooth 60fps behavior for landing page entrances and scroll-triggered reveals.

Scroll-triggered reveals must include reduced-motion fallbacks using @media (prefers-reduced-motion: reduce) aligned with WCAG 2.3.3. This ensures users who prefer reduced motion see static content instead of animations when scrolling through web interfaces.

Framer Motion works with viewport-based entrances by providing staggered variants for React components, while CSS and Intersection Observer implementations handle scroll-triggered reveals. Both approaches enforce reduced-motion handling and use transform/opacity for performance.

Animating UI micro-interactions for button feedback states is best done using transform and opacity properties. This maintains 60fps performance and includes prefers-reduced-motion fallbacks, covering interactive feedback states without breaking accessibility constraints.

Animating CSS properties other than transform and opacity causes UI lag because it triggers layout recalculations and paint thrashing. Limiting animations strictly to transform and opacity leverages GPU acceleration to maintain smooth 60fps rendering.

Framer Motion can be used for route and page transitions in modern frontends. It provides production-ready motion patterns for React, including staggered variants and viewport-based entrances, while enforcing accessibility fallbacks for reduced motion preferences.