CodeBlanks Logo Icon CodeBlanks
Login Register

The motion component

Learn to animate with motion.div style components.

What are variants?

Variants let you define animation states as named objects. With variants={{ hidden: { opacity: 0 }, visible: { opacity: 1 } }} you define the 'hidden' and 'visible' states.

You call these states with initial="hidden" and animate="visible". This cuts code repetition and makes animations reusable.

Variants auto-propagate to children; this way changing a parent animates all children in sync.

Using variants

You define a variant object, then pass it to motion.div via the variants prop. You call the states with initial="hidden" and animate="visible".

This method is especially useful when multiple components share the same animation. You define one object and use it everywhere.

Variants can also include transition; this way each state defines its own duration and easing.

Practice Write a variant animation

Complete the skeleton. Define const variants = { hidden: { opacity: 0 }, visible: { opacity: 1 } };. Write a VariantBox component; render <motion.div variants={variants} initial="hidden" animate="visible" transition={{ duration: 0.4 }}>Box</motion.div>. Import motion from 'framer-motion'. Add export default.

Starter code

App.jsx
import { motion } from 'framer-motion';

// Write VariantBox here

Sample solution

App.jsx
import { motion } from 'framer-motion';

const variants = {
  hidden: { opacity: 0 },
  visible: { opacity: 1 },
};

function VariantBox() {
  return (
    <motion.div
      variants={variants}
      initial="hidden"
      animate="visible"
      transition={{ duration: 0.4 }}
    >
      Box
    </motion.div>
  );
}

export default VariantBox;

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 What do variants provide?

  • Faster CSS
  • Fewer files
  • Named states Correct answer
  • Shorter imports

Explanation: Variants provide named states.

2 variant call

Question 
<motion.div variants={variants} initial="____" animate="visible">
Answer 
<motion.div variants={variants} initial="hidden" animate="visible">

Explanation: hidden is the starting state.

3 The motion component: match the terms

Term Meaning
variants State object
hidden Hidden state
visible Visible state
transition Duration

All lessons in Advanced

1 Next.js basics

  1. What is Next.js?
  2. App Router
  3. Page and layout
  4. Summary - Next.js basics

2 SSR and SSG

  1. What is SSR?
  2. What is SSG?
  3. Server Components
  4. Summary - SSR and SSG

3 API routes

  1. API routes
  2. GET and POST
  3. JSON response
  4. Summary - API routes

4 Next.js store

  1. Project: Next.js store
  2. Static home page
  3. Dynamic product page
  4. Cart API

5 Data fetching

  1. Data fetching with SWR
  2. React Query basics
  3. Mutations
  4. Summary - Data fetching

6 Redux Toolkit

  1. What is Redux Toolkit?
  2. createSlice
  3. configureStore
  4. Summary - Redux Toolkit

7 Zustand

  1. What is Zustand?
  2. Store with create
  3. Using selectors
  4. Summary - Zustand

8 State project

  1. Project: State management
  2. Redux Toolkit store
  3. Zustand cart store
  4. Data fetching with SWR

9 react-hook-form

  1. What is react-hook-form?
  2. register and handleSubmit
  3. Validation
  4. Summary - react-hook-form

10 Framer Motion

  1. What is Framer Motion?
  2. The motion component
  3. Transitions and variants
  4. Summary - Framer Motion

11 Accessibility and i18n

  1. Accessibility basics
  2. ARIA and keyboard
  3. i18n and react-i18next
  4. Summary - Accessibility and i18n

12 Advanced testing

  1. Integration testing
  2. Mock Service Worker
  3. Coverage measurement
  4. Summary - Advanced testing

13 CI/CD and monitoring

  1. CI/CD basics
  2. GitHub Actions
  3. Performance monitoring
  4. Summary - CI/CD and monitoring

14 Advanced final

  1. Challenge: Next.js API
  2. Challenge: Zustand store
  3. Challenge: Form and validation
  4. Challenge: Accessible modal