Learn FRAMER-MOTION with Real Code Examples

# framer_motion/demo/App.jsx
import React from 'react';
import { motion } from 'framer-motion';

function App() {
    return (
        <motion.div
        style={{ width: 100, height: 100, backgroundColor: 'blue' }}
        animate={{ scale: 1.5, rotate: 360 }}
        duration={2}
        />
    );
}

export default App;

A basic Framer Motion example animating a div element scaling up and rotating on render.

# framer_motion/demo/fade_in.jsx
import React from 'react';
import { motion } from 'framer-motion';

function FadeIn() {
    return (
        <motion.div
        style={{ width: 100, height: 100, backgroundColor: 'red' }}
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        duration={1}
        />
    );
}

export default FadeIn;

Animates a div fading in on mount.

# framer_motion/demo/slide_in.jsx
import React from 'react';
import { motion } from 'framer-motion';

function SlideIn() {
    return (
        <motion.div
        style={{ width: 100, height: 100, backgroundColor: 'green' }}
        initial={{ x: -200 }}
        animate={{ x: 0 }}
        duration={1}
        />
    );
}

export default SlideIn;

Slides a div in from the left.

# framer_motion/demo/bounce.jsx
import React from 'react';
import { motion } from 'framer-motion';

function Bounce() {
    return (
        <motion.div
        style={{ width: 100, height: 100, backgroundColor: 'orange' }}
        animate={{ y: [0, -50, 0] }}
        transition={{ duration: 1, repeat: Infinity }}
        />
    );
}

export default Bounce;

Bounces a div up and down.

# framer_motion/demo/rotate.jsx
import React from 'react';
import { motion } from 'framer-motion';

function Rotate() {
    return (
        <motion.div
        style={{ width: 100, height: 100, backgroundColor: 'purple' }}
        animate={{ rotate: 360 }}
        transition={{ duration: 2, repeat: Infinity }}
        />
    );
}

export default Rotate;

Rotates a div continuously.

# framer_motion/demo/scale_up_down.jsx
import React from 'react';
import { motion } from 'framer-motion';

function ScaleUpDown() {
    return (
        <motion.div
        style={{ width: 100, height: 100, backgroundColor: 'yellow' }}
        animate={{ scale: [1, 1.5, 1] }}
        transition={{ duration: 1, repeat: Infinity }}
        />
    );
}

export default ScaleUpDown;

Scales a div up and down repeatedly.

# framer_motion/demo/hover_effect.jsx
import React from 'react';
import { motion } from 'framer-motion';

function HoverEffect() {
    return (
        <motion.div
        style={{ width: 100, height: 100, backgroundColor: 'pink' }}
        whileHover={{ scale: 1.2 }}
        transition={{ duration: 0.3 }}
        />
    );
}

export default HoverEffect;

Scales a div when hovered.

# framer_motion/demo/drag.jsx
import React from 'react';
import { motion } from 'framer-motion';

function Drag() {
    return (
        <motion.div
        style={{ width: 100, height: 100, backgroundColor: 'cyan' }}
        drag
        />
    );
}

export default Drag;

Makes a div draggable.

# framer_motion/demo/stagger_children.jsx
import React from 'react';
import { motion } from 'framer-motion';

function StaggerChildren() {
    return (
        <motion.div
        initial="hidden"
        animate="visible"
        variants={{
        hidden: {},
        visible: { transition: { staggerChildren: 0.2 } }
        }}>
        <motion.div style={{ width: 50, height: 50, backgroundColor: 'red' }} variants={{ hidden:{opacity:0}, visible:{opacity:1} }}/>
        <motion.div style={{ width: 50, height: 50, backgroundColor: 'green' }} variants={{ hidden:{opacity:0}, visible:{opacity:1} }}/>
        <motion.div style={{ width: 50, height: 50, backgroundColor: 'blue' }} variants={{ hidden:{opacity:0}, visible:{opacity:1} }}/>
        </motion.div>
    );
}

export default StaggerChildren;

Animates multiple divs with staggered timing.

# framer_motion/demo/keyframes.jsx
import React from 'react';
import { motion } from 'framer-motion';

function Keyframes() {
    return (
        <motion.div
        style={{ width: 100, height: 100, backgroundColor: 'orange' }}
        animate={{ x: [0, 100, 0], rotate: [0, 180, 360] }}
        transition={{ duration: 2, repeat: Infinity }}
        />
    );
}

export default Keyframes;

Animates a div using keyframes for multiple properties.