Framer Motion

Framer Motion is a production-ready animation library for React with a simple API.

Syntax

REACT

1
2
3
4
5
6
7
8
9
10
11

import { motion } from "framer-motion";

function Box() {
    return (
        <motion.div
            initial={{ opacity: 0, y: -50 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
        />
    );
}

Framer Motion Animation

REACT

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import { motion } from "framer-motion";

function Box() {
    return (
        <motion.div
            initial={{ opacity: 0, y: -50 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            style={{
                width: 100, height: 100,
                background: "blue", borderRadius: 8
            }}
        />
    );
}

Try It Yourself

Tutorial Complete

Back to React