modern-web-design

Use gsap.to() with a scrollTrigger config specifying trigger element, start/end positions, and scrub for scroll-linked playback. Pin sections for multi-step reveals and batch animations to maintain 60 FPS performance.

Wrap animations in a @media (prefers-reduced-motion: reduce) query that sets animation and transition durations to 0.01ms. In JavaScript, detect the preference with window.matchMedia and disable GSAP or Framer Motion animations accordingly.

Framer Motion suits React component animations, gestures, and layout transitions with declarative variants. GSAP ScrollTrigger is better for scroll-driven storytelling, pinning, and scrubbing animations tied to scroll position.

Yes, backdrop-filter is expensive on mobile GPUs. Limit glassmorphic elements to 2-3 per viewport, apply will-change only during animations, and test on real low-end devices rather than simulators.

Target a 7:1 contrast ratio for normal text and 4.5:1 for large text. Use the OKLCH color space for perceptually uniform palettes and verify ratios with the contrast calculation function or tools like WebAIM Contrast Checker.

Lag occurs when animating layout properties like top/left instead of GPU-accelerated transforms and opacity. Reduce animation complexity on mobile, disable parallax and 3D effects on low-end devices, and test with real hardware.