Section Animations

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:

import { MotionSection } from "@/​components/​ui/​motion-section";

// In page.tsx
<MotionSection delay={0}>
  <Hero />
</​MotionSection>
<MotionSection delay={0.1}>
  <Logos />
</​MotionSection>
<MotionSection delay={0.1}>
  <Features />
</​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):

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 }
};

<motion.div
  variants={container}
  initial="hidden"
  whileInView="show"
  viewport={{ once: true }}
  className="grid grid-cols-3 gap-6"
>
  {features.map((feature) => (
    <motion.div key={feature.id} variants={item}>
      <FeatureCard {...feature} />
    </​motion.div>
  ))}
</​motion.div>

3. Hover Effects

For cards and interactive elements:

// Card hover - lift and scale
<motion.div
  whileHover={{ scale: 1.02, y: -4 }}
  transition={{ type: "spring", stiffness: 300 }}
  className="p-6 rounded-lg border"
>
  {/​* Card content */​}
</​motion.div>

// Button press feedback
<motion.button
  whileHover={{ scale: 1.02 }}
  whileTap={{ scale: 0.98 }}
  className="btn"
>
  Click me
</​motion.button>

4. Image Reveals

For hero images or featured media:

// Clip-path wipe effect
<motion.div
  initial={{ clipPath: "inset(100% 100% 0% 0%)" }}
  whileInView={{ clipPath: "inset(0% 0% 0% 0%)" }}
  viewport={{ once: true }}
  transition={{ type: "spring", stiffness: 150, damping: 20 }}
>
  <img src={image} alt="" />
</​motion.div>

// Zoom-in on scroll
<motion.div
  initial={{ scale: 1.1, opacity: 0 }}
  whileInView={{ scale: 1, opacity: 1 }}
  viewport={{ once: true }}
  transition={{ duration: 0.6 }}
>
  <img src={image} alt="" />
</​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

Output

• All sections wrapped with MotionSection
• Grids and lists with stagger animations
• Cards with hover lift effect
• Buttons with tap feedback
• Smooth 60fps performance