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.

Exercise 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.

Show example solution

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;

Test yourself

What does Framer Motion use?
- CSS keyframes
- motion components
- Web Animations API
- Canvas
Show answer

motion components — Motion components.

motion component

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

Show answer

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

What is Framer Motion: match the terms

initial

Starting state
animate

Target state
transition

Duration/easing
motion.div

Animated div

Next lesson: The motion component

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies