framer-animations

Wrap page sections with a MotionSection component to enable scroll-triggered animations using Framer Motion. This automates fade-ins, staggered reveals, and hover effects across your layout while maintaining 60fps performance through GPU-accelerated properties and viewport-triggered animations.

Use staggered transitions within MotionSection to animate grid and list items with sequential entrances. This technique applies to feature grids, pricing tables, and step lists, creating smooth, cascading reveals that improve perceived performance without blocking page load.

Yes. This Skill provides performance-aware patterns: animate only GPU-accelerated properties (transform, opacity), trigger animations once per viewport, use staggered timing, and test on mobile devices. These guidelines ensure consistent 60fps motion across browsers and devices.

Apply hover lift and micro-interactions using MotionSection's hover handlers on cards and CTA buttons. Framer Motion's gesture detection and spring animations create responsive, lightweight interactions that feel native without frame drops.

This Skill requires Framer Motion v12.23.25 or compatible. The MotionSection component and micro-animation patterns are built for this version to ensure API stability and performance optimizations across section reveals, staggered lists, and hover effects.

Avoid animations on low-end mobile devices without GPU acceleration or when accessibility settings disable motion. Test motion-reduce preferences and provide static fallbacks. Skip animations on performance-critical pages with heavy JavaScript or complex layouts.