Summary - Framer Motion

Make a modal animate when it opens and closes.

Summary - Framer Motion

In this group you learned what Framer Motion is, the motion components and variants. Now it's time to combine them.

Typical flow: write an animated component with motion.div, define states with initial and animate, add enter/leave animation with AnimatePresence.

In the next step you will write a modal that animates on open and close.

Exercise Modal open/close animation

Complete the skeleton. Write a ModalSummary component. Keep isOpen (false) with useState. Add <button onClick={() => setIsOpen(true)}>Open</button>. Inside <AnimatePresence> put {isOpen && <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>Content<button onClick={() => setIsOpen(false)}>Close</button></motion.div>}. Import motion and AnimatePresence. Add export default.

Show example solution

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

function ModalSummary() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open</button>
      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
          >
            Content
            <button onClick={() => setIsOpen(false)}>Close</button>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

export default ModalSummary;

Test yourself

Which topic was NOT covered?
- motion component
- variants
- AnimatePresence
- useTransition hook
Show answer

useTransition hook — useTransition hook was not covered.

AnimatePresence usage

<____>{isOpen && <motion.div />}</AnimatePresence>

Show answer

<AnimatePresence>{isOpen && <motion.div />}</AnimatePresence>

Next lesson: Accessibility basics

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies