--- name: framer-animations description: Add Framer Motion micro-animations to page sections. Includes section reveals, staggered lists, hover effects, and performance optimization. Use after section-backgrounds for each page. --- # Section Animations Add subtle micro-animations to finalize the look and feel of each page. ## Prerequisites - Framer Motion already installed (v12.23.25) - MotionSection component exists at `components\/ui\/motion-section.tsx` ## Workflow 1. **Wrap Page Sections** - Add MotionSection to each section 2. **Add Staggered Lists** - Animate feature grids, pricing cards, process steps 3. **Add Hover Effects** - Cards, buttons, interactive elements 4. **Verify Performance** - Ensure smooth 60fps animations ## Animation Types ### 1. Section Reveals Wrap each section with MotionSection for scroll-triggered fade-in: ```jsx import { MotionSection } from "@\/components\/ui\/motion-section"; \/\/ In page.tsx <\/MotionSection> <\/MotionSection> <\/MotionSection> ``` **Delay Pattern:** 0, 0.1, 0.1, 0.1... (first section immediate, rest staggered) ### 2. Staggered Lists For grids and lists (features, pricing cards, process steps): ```jsx import { motion } from "framer-motion"; const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.1 } } }; const item = { hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0 } }; {features.map((feature) => ( <\/motion.div> ))} <\/motion.div> ``` ### 3. Hover Effects For cards and interactive elements: ```jsx \/\/ Card hover - lift and scale {\/* Card content *\/} <\/motion.div> \/\/ Button press feedback Click me <\/motion.button> ``` ### 4. Image Reveals For hero images or featured media: ```jsx \/\/ Clip-path wipe effect

<\/motion.div> \/\/ Zoom-in on scroll

<\/motion.div> ``` ## Performance Rules See references\/performance-tips.md for details. 1. **Animate only once:** `viewport={{ once: true }}` 2. **GPU-accelerated properties only:** `opacity`, `transform` (scale, translate, rotate) 3. **Avoid:** `width`, `height`, `top`, `left`, `margin`, `padding` 4. **Duration:** 0.3-0.6s (subtle, not distracting) 5. **Easing:** `easeOut` for entries, `spring` for interactions ## Where to Apply | Section Type | Animation | |--------------|-----------| | Hero | MotionSection (immediate) | | Logos | MotionSection + stagger | | Features | MotionSection + stagger grid | | Process | MotionSection + stagger steps | | Pricing | MotionSection + stagger cards + hover | | Testimonials | MotionSection + stagger | | FAQ | MotionSection | | CTA | MotionSection | ## Output - All sections wrapped with MotionSection - Grids and lists with stagger animations - Cards with hover lift effect - Buttons with tap feedback - Smooth 60fps performance