Skip to main content

Framer Motion Basics: Getting Started With Motion Components

Framer Motion is a React animation library that lets you animate DOM elements declaratively using component props. It handles the timing, rendering, and interpolation so your code stays clean and your animations run at 60fps on any device. You write animate, initial, and exit props instead of CSS keyframes or imperative setTimeout calls.

I've used Framer Motion on production dashboards and e-commerce sites since 2021, and it's the fastest way to ship professional animations without wrestling with low-level Web Animations API or CSS-in-JS complexity. This article covers installation, your first motion component, and why declarative animation matters.

What Is Framer Motion and Why Use It?​

Framer Motion is a declarative animation library that brings motion directly into React components. Instead of managing animation state manually or writing CSS keyframes, you describe the target state (animate), starting state (initial), and exit behavior, and Framer Motion handles the transitions between them automatically.

The library ships as a single NPM package, uses CSS transforms under the hood for maximum performance, and integrates seamlessly with React's lifecycle. It's used by companies including Stripe, Slack, and OpenAI for production interfaces (Framer, 2026).

Installing Framer Motion​

Start by adding Framer Motion to your React project:

npm install framer-motion

Or with Yarn:

yarn add framer-motion

Framer Motion requires React 16.8 or newer (hooks-compatible). The library is 45 KB minified and gzipped, adding minimal overhead to your bundle. Once installed, you import motion and AnimatePresence from the package in your components.

Your First Motion Component​

The core of Framer Motion is the motion object: a set of pre-configured HTML and SVG element tags that accept animation props. Here's a simple fade-in on mount:

import { motion } from 'framer-motion';

export function FadeInBox() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.8 }}
    >
      <h2>Welcome to Framer Motion</h2>
      <p>This box fades in when the component mounts.</p>
    </motion.div>
  );
}

The motion.div component renders a standard <div> but intercepts the animate, initial, and transition props. When the component mounts, Framer Motion transitions from the initial state to the animate state over 0.8 seconds. The browser smoothly interpolates opacity from 0 to 1 using CSS transforms.

Animate, Initial, and Transition Props​

Every motion component accepts three core props:

PropPurposeExample
initialStarting state before animation{ opacity: 0, y: -20 }
animateTarget state to animate toward{ opacity: 1, y: 0 }
transitionDuration, delay, easing{ duration: 0.5, delay: 0.2 }

The animate prop accepts any CSS property that can be animated: opacity, color, transform (x, y, scale, rotate), blur, and hundreds more. Framer Motion converts these high-level properties into efficient CSS transforms automatically.

Here's an example with transform properties:

import { motion } from 'framer-motion';

export function SlideInButton() {
  return (
    <motion.button
      initial={{ x: -100, opacity: 0 }}
      animate={{ x: 0, opacity: 1 }}
      transition={{ duration: 0.6, type: 'spring' }}
      style={{
        padding: '10px 20px',
        backgroundColor: '#0066cc',
        color: '#fff',
        border: 'none',
        borderRadius: '4px',
        cursor: 'pointer'
      }}
    >
      Click Me
    </motion.button>
  );
}

This button slides in from the left (x: -100) while fading in, over 0.6 seconds using a spring transition. The transition prop controls how Framer Motion animates between initial and animate: you specify duration, delay, easing, and animation type (tween or spring).

Motion Element Types​

Framer Motion provides motion-enhanced versions of HTML and SVG elements:

  • HTML: motion.div, motion.span, motion.button, motion.img, motion.form, motion.section, etc.
  • SVG: motion.svg, motion.path, motion.circle, motion.rect, motion.g, etc.
  • Custom components: You can wrap any component with motion() if it forwards refs correctly.

Each motion element behaves like its vanilla counterpart but with animation-aware props. You can nest motion elements, style them with inline styles or CSS classes, and combine them with your existing React logic.

Why Not Just Use CSS Animations?​

CSS animations are powerful, but they have limitations:

  1. State coordination: With CSS, you manage animation state via class names or inline styles. Framer Motion syncs animation state with your React component state automatically.
  2. Exit animations: CSS animations don't run on unmount by default; you'd need to delay unmounting with a flag. Framer Motion's AnimatePresence handles exit animations natively.
  3. Responsive & dynamic: Framer Motion lets you modify animation targets in response to viewport size, user input, or data changes without rewriting keyframes.
  4. Gesture integration: Hover, tap, and drag listeners built into motion components let you respond to user input with animation immediately.

CSS animations excel for static, repeating animations; Framer Motion excels for interactive, dynamic, stateful animations tied to your component lifecycle.

Key Takeaways​

  • Framer Motion is a declarative React animation library that handles timing and rendering automatically.
  • Import motion from framer-motion and replace div, button, etc. with motion.div, motion.button.
  • Every motion component accepts initial, animate, and transition props that define the animation lifecycle.
  • Framer Motion converts high-level properties (x, y, opacity, scale) into efficient CSS transforms.
  • Use Framer Motion when animations are tied to state, user interaction, or component lifecycle; CSS animations for static repeating effects.

Frequently Asked Questions​

Do I need to install Framer Motion separately or does React include it?​

Framer Motion is a third-party NPM package; React does not include it. You must install it explicitly with npm install framer-motion. React itself has no built-in declarative animation API—you'd use CSS, Web Animations, or Framer Motion for that.

Can I use Framer Motion with Next.js or other React frameworks?​

Yes. Framer Motion works with any React 16.8+ codebase: Next.js, Remix, Gatsby, or plain Create React App. It's framework-agnostic because it operates at the React component level. Ensure your build tool supports ES modules and JSX.

What's the difference between initial and animate?​

initial is the starting state before animation runs—the component mounts in this state. animate is the target state. Framer Motion automatically transitions from initial to animate when the component mounts, using the transition prop to control speed and easing.

Can motion components replace regular HTML elements everywhere?​

Almost everywhere. Motion components forward all standard HTML props (className, id, onClick, etc.) so they work as drop-in replacements. The only exception is when a component doesn't forward refs—in that case, wrap it with motion() if needed. For 95% of cases, just swap div for motion.div.

Further Reading​