Learn Framer-motion - 10 Code Examples & CST Typing Practice Test

Framer Motion is a production-ready animation library for React, designed to create smooth, declarative animations, gestures, and transitions in web applications.

View all 10 Framer-motion code examples →

Simple Framer Motion Animation Framer Motion Fade In Framer Motion Slide In Framer Motion Bounce Framer Motion Rotate Framer Motion Scale Up Down Framer Motion Hover Effect Framer Motion Drag Framer Motion Stagger Children Framer Motion Keyframes

Learn FRAMER-MOTION with Real Code Examples

Updated Nov 26, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Simple Framer Motion Animation

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

Let’s Try →

Framer Motion Fade In

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

Let’s Try →

Framer Motion Slide In

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

Let’s Try →

Framer Motion Bounce

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

Let’s Try →

Framer Motion Rotate

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

Let’s Try →

Framer Motion Scale Up Down

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

Let’s Try →

Framer Motion Hover Effect

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

Let’s Try →

Framer Motion Drag

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

Let’s Try →

Framer Motion Stagger Children

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

Let’s Try →

Framer Motion Keyframes

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

Let’s Try →

Frequently Asked Questions about Framer-motion

What is Framer-motion?

Framer Motion is a production-ready animation library for React, designed to create smooth, declarative animations, gestures, and transitions in web applications.

What are the primary use cases for Framer-motion?

Page and component transitions. Interactive UI animations and micro-interactions. Drag-and-drop gestures. Animated modals, menus, and notifications. Shared element transitions and layout animations

What are the strengths of Framer-motion?

Deep integration with React. Simple declarative syntax. Supports complex UI animations easily. Cross-browser performance optimized. Flexible API for interactive and dynamic animations

What are the limitations of Framer-motion?

React-only library. Can increase bundle size for large apps. Complex animations may need fine-tuning for performance. Limited low-level WebGL-like graphics control. Requires understanding of React state for dynamic animations

How can I practice Framer-motion typing speed?

CodeSpeedTest offers 10+ real Framer-motion code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Code Sample Descriptions

Simple Framer Motion Animation

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

Let’s Try →

Framer Motion Fade In

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

Let’s Try →

Framer Motion Slide In

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

Let’s Try →

Framer Motion Bounce

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

Let’s Try →

Framer Motion Rotate

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

Let’s Try →

Framer Motion Scale Up Down

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

Let’s Try →

Framer Motion Hover Effect

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

Let’s Try →

Framer Motion Drag

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

Let’s Try →

Framer Motion Stagger Children

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

Let’s Try →

Framer Motion Keyframes

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

Let’s Try →

Frequently Asked Questions about Framer-motion

What is Framer-motion?

Framer Motion is a production-ready animation library for React, designed to create smooth, declarative animations, gestures, and transitions in web applications.

What are the primary use cases for Framer-motion?

Page and component transitions. Interactive UI animations and micro-interactions. Drag-and-drop gestures. Animated modals, menus, and notifications. Shared element transitions and layout animations

What are the strengths of Framer-motion?

Deep integration with React. Simple declarative syntax. Supports complex UI animations easily. Cross-browser performance optimized. Flexible API for interactive and dynamic animations

What are the limitations of Framer-motion?

How can I practice Framer-motion typing speed?

CodeSpeedTest offers 10+ real Framer-motion code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.