React Academy · Lesson

Motion Components & Basic Animations

Replace div with motion.div and use animate, initial, and exit props for simple animations.

Motion Components & Basic Animations is a free React Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is Framer Motion?

Framer Motion is a React animation library. Replace HTML elements with their motion.* equivalents to add declarative animations via props instead of CSS keyframes.

Installation

Install Framer Motion and import motion from it.

npm install framer-motion

import { motion } from 'framer-motion';

Your First Animation

Replace <div> with <motion.div> and add initial, animate, and transition props.

<motion.div
  initial={{ opacity: 0, y: -20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.4 }}
>
  Hello, Framer Motion!
</motion.div>

The initial Prop

initial defines the starting state of the animation — where the element starts before it animates to animate.

// Fade in from left
<motion.div
  initial={{ opacity: 0, x: -50 }}
  animate={{ opacity: 1, x: 0 }}
/>

// Scale up from center
<motion.button
  initial={{ scale: 0 }}
  animate={{ scale: 1 }}
/>

The animate Prop

animate defines the target state. Framer Motion interpolates between initial and animate using spring physics or a specified easing.

<motion.h1
  initial={{ opacity: 0 }}
  animate={{ opacity: 1, color: '#4f46e5' }}
  transition={{ duration: 0.6, ease: 'easeOut' }}
>
  Welcome
</motion.h1>

Transition Options

The transition prop controls how the animation moves: duration, ease, delay, type ('spring' | 'tween' | 'inertia').

transition={{
  type: 'spring',
  stiffness: 300,
  damping: 20,
  delay: 0.2,
}}

Keyframes in animate

Pass an array to any animated value to create keyframe animations that pass through multiple states.

<motion.div
  animate={{ x: [0, 30, 0] }}
  transition={{ duration: 1, repeat: Infinity, ease: 'easeInOut' }}
/>

Hover and Tap States

whileHover and whileTap define animated states for hover and press interactions, reverting automatically when the gesture ends.

<motion.button
  whileHover={{ scale: 1.05, backgroundColor: '#4f46e5' }}
  whileTap={{ scale: 0.95 }}
  style={{ backgroundColor: '#6366f1' }}
>
  Press me
</motion.button>

Animate on Scroll with inView

Use the whileInView prop to trigger an animation when the element scrolls into the viewport.

<motion.section
  initial={{ opacity: 0, y: 40 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, amount: 0.3 }}
  transition={{ duration: 0.5 }}
>
  <h2>Revealed on scroll</h2>
</motion.section>

The exit Prop with AnimatePresence

exit defines the animation when a component unmounts. It only works when wrapped in <AnimatePresence>.

import { motion, AnimatePresence } from 'framer-motion';

<AnimatePresence>
  {isVisible && (
    <motion.div
      key="modal"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0, scale: 0.95 }}
    />
  )}
</AnimatePresence>

useAnimate for Imperative Control

useAnimate() returns a scope ref and an animate function for programmatic animation control outside of the declarative prop system.

import { useAnimate } from 'framer-motion';

function ShakeButton() {
  const [scope, animate] = useAnimate();
  const handleClick = async () => {
    await animate(scope.current, { x: [-10, 10, -10, 0] }, { duration: 0.3 });
  };
  return <motion.button ref={scope} onClick={handleClick}>Shake</motion.button>;
}

Reducing Motion

Respect the user's reduced-motion preference with the useReducedMotion() hook.

import { useReducedMotion } from 'framer-motion';

function AnimatedCard() {
  const shouldReduce = useReducedMotion();
  return (
    <motion.div
      animate={{ opacity: 1, y: shouldReduce ? 0 : -20 }}
    />
  );
}

Quick Check

Which Framer Motion prop defines the animation state a component should reach (its target)?

Recap

Replace HTML elements with motion.* equivalents. Use initial for start state, animate for target, transition for timing, whileHover/whileTap for gestures, and whileInView for scroll-triggered animations.

Frequently asked questions

Is the “Motion Components & Basic Animations” lesson free?

Yes — the full text of “Motion Components & Basic Animations” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Motion Components & Basic Animations”?

Replace div with motion.div and use animate, initial, and exit props for simple animations. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Motion Components & Basic Animations” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to React Academy