CodeBlanks Logo Icon CodeBlanks
Login Register

What is Framer Motion?

Learn the basics of writing animations with Framer Motion.

What is Framer Motion?

Framer Motion is a popular animation library for React. You add animation to JSX with motion components; you get smooth transitions without writing CSS.

Components like motion.div take initial, animate and transition props. This defines the start, end and duration in one place.

Framer Motion uses GPU-accelerated animations; this keeps it performant. You can also define component states with variants.

The motion component

motion.div is like a normal <div> but takes animation props. initial={{ opacity: 0 }} hides it at start, animate={{ opacity: 1 }} makes it visible.

transition={{ duration: 0.3 }} sets the animation duration to 300ms. These three props together give a simple fade-in animation.

Every HTML tag has a motion version: motion.span, motion.button, motion.ul and so on.

Practice Fade-in animation

Complete the skeleton. Write a FadeIn component. Render <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5 }}>Hello</motion.div>. Import motion from 'framer-motion'. Add export default.

Starter code

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

// Write FadeIn here

Sample solution

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

function FadeIn() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
    >
      Hello
    </motion.div>
  );
}

export default FadeIn;

Questions and answers

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

1 What does Framer Motion use?

  • CSS keyframes
  • motion components Correct answer
  • Web Animations API
  • Canvas

Explanation: Motion components.

2 motion component

Question 
<____ initial={{ opacity: 0 }} animate={{ opacity: 1 }}>Merhaba</motion.div>
Answer 
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>Merhaba</motion.div>

Explanation: motion.div is an animated div.

3 What is Framer Motion: match the terms

Term Meaning
initial Starting state
animate Target state
transition Duration/easing
motion.div Animated div

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