Skip to main content
Back to Blog
Framer MotionReactAnimations

Framer Motion with React: Animations, Transitions, and Scroll Effects

8 min read

A hands-on guide to adding professional animations to React and Next.js apps with Framer Motion — variants, scroll-triggered animations, layout transitions, and performance tips.

Framer Motion is the leading animation library for React and Next.js, enabling everything from simple fade-ins to complex gesture-driven interactions with a clean, declarative API. Muhammad Sufyan of Sufyan Frontend uses Framer Motion throughout his portfolio at https://sufyan-frontend.vercel.app and shares this hands-on guide to adding professional animations to your React projects.

Getting Started with Framer Motion

The core of Framer Motion is the motion component — a drop-in replacement for standard HTML elements that accepts animation props. The initial, animate, and exit props define the three states of an element's lifecycle, and Framer Motion handles all the interpolation between them automatically.

import { motion } from "framer-motion";

// Simple fade-in and slide-up
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.4, ease: "easeOut" }}
>
  Content here
</motion.div>

Variants for Orchestrated Animations

Variants let you define named animation states and coordinate animations across parent and child components. When a parent animates, its children can stagger their animations automatically — creating polished list reveals and dashboard card entrances with minimal code.

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.ul variants={container} initial="hidden" animate="show">
  {items.map(i => (
    <motion.li key={i.id} variants={item}>{i.name}</motion.li>
  ))}
</motion.ul>

Scroll-Triggered Animations with whileInView

  • ▸Use whileInView prop to trigger animations when elements scroll into view
  • ▸Set the viewport prop with once: true so elements animate only once, not on every scroll pass
  • ▸Use useScroll and useTransform for parallax and scroll-linked effects
  • ▸Keep animation durations under 400ms for UI interactions — longer only for hero reveals

Conclusion

Framer Motion transforms good-looking React apps into polished, professional products that feel alive and responsive. Muhammad Sufyan uses Framer Motion to power the scroll-triggered reveal animations throughout his portfolio at https://sufyan-frontend.vercel.app. Start with simple initial and animate props, then graduate to variants and scroll hooks as your confidence grows.