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

React Motion is a popular animation library for React that uses physics-based animations to create smooth and natural transitions. It provides a simple API to animate components’ styles over time using spring dynamics rather than fixed durations.

View all 10 React-motion code examples →

Simple React Motion Animation Vertical Slide Animation Opacity Fade Animation Scale Up Animation Diagonal Slide Animation Spring Rotation Animation Bounce Animation Delayed Start Animation Multi-Direction Animation Opacity and Position Combined

Learn REACT-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 React Motion Animation

# react_motion/demo/App.jsx
import React from 'react';
import { Motion, spring } from 'react-motion';

function App() {
    return (
        <Motion defaultStyle={{ x: 0 }} style={{ x: spring(300) }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'orange', transform: `translateX(${style.x}px)` }} />
        )}
        </Motion>
    );
}

export default App

A basic React Motion example animating a div element moving horizontally using spring physics.

Let’s Try →

Vertical Slide Animation

# react_motion/demo/VerticalSlide.jsx
import React from 'react';
import { Motion, spring } from 'react-motion';

function VerticalSlide() {
    return (
        <Motion defaultStyle={{ y: 0 }} style={{ y: spring(200) }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'green', transform: `translateY(${style.y}px)` }} />
        )}
        </Motion>
    );
}

export default VerticalSlide

Animates a div sliding vertically using spring physics.

Let’s Try →

Opacity Fade Animation

# react_motion/demo/Fade.jsx
import React from 'react';
import { Motion, spring } from 'react-motion';

function Fade() {
    return (
        <Motion defaultStyle={{ opacity: 0 }} style={{ opacity: spring(1) }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'purple', opacity: style.opacity }} />
        )}
        </Motion>
    );
}

export default Fade

Animates a div fading in using React Motion.

Let’s Try →

Scale Up Animation

# react_motion/demo/ScaleUp.jsx
import React from 'react';
import { Motion, spring } from 'react-motion';

function ScaleUp() {
    return (
        <Motion defaultStyle={{ scale: 0.5 }} style={{ scale: spring(1) }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'red', transform: `scale(${style.scale})` }} />
        )}
        </Motion>
    );
}

export default ScaleUp

Animates a div scaling up smoothly using spring.

Let’s Try →

Diagonal Slide Animation

# react_motion/demo/DiagonalSlide.jsx
import React from 'react';
import { Motion, spring } from 'react-motion';

function DiagonalSlide() {
    return (
        <Motion defaultStyle={{ x: 0, y: 0 }} style={{ x: spring(150), y: spring(150) }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'blue', transform: `translate(${style.x}px, ${style.y}px)` }} />
        )}
        </Motion>
    );
}

export default DiagonalSlide

Moves a div diagonally using React Motion spring physics.

Let’s Try →

Spring Rotation Animation

# react_motion/demo/Rotate.jsx
import React from 'react';
import { Motion, spring } from 'react-motion';

function Rotate() {
    return (
        <Motion defaultStyle={{ rotate: 0 }} style={{ rotate: spring(360) }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'teal', transform: `rotate(${style.rotate}deg)` }} />
        )}
        </Motion>
    );
}

export default Rotate

Rotates a div smoothly using spring animation.

Let’s Try →

Bounce Animation

# react_motion/demo/Bounce.jsx
import React from 'react';
import { Motion, spring } from 'react-motion';

function Bounce() {
    return (
        <Motion defaultStyle={{ y: 0 }} style={{ y: spring(100, { stiffness: 120, damping: 5 }) }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'pink', transform: `translateY(${style.y}px)` }} />
        )}
        </Motion>
    );
}

export default Bounce

Bounces a div up and down using React Motion.

Let’s Try →

Delayed Start Animation

# react_motion/demo/Delayed.jsx
import React, { useState, useEffect } from 'react';
import { Motion, spring } from 'react-motion';

function Delayed() {
    const [start, setStart] = useState(false)
    useEffect(() => { setTimeout(() => setStart(true), 1000) }, [])
    return (
        <Motion defaultStyle={{ x: 0 }} style={{ x: spring(start ? 200 : 0) }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'brown', transform: `translateX(${style.x}px)` }} />
        )}
        </Motion>
    )
}

export default Delayed

Delays the start of animation using setTimeout and spring.

Let’s Try →

Multi-Direction Animation

# react_motion/demo/MultiDirection.jsx
import React from 'react';
import { Motion, spring } from 'react-motion';

function MultiDirection() {
    return (
        <Motion defaultStyle={{ x: 0, y: 0 }} style={{ x: spring(200), y: spring(50) }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'cyan', transform: `translate(${style.x}px, ${style.y}px)` }} />
        )}
        </Motion>
    )
}

export default MultiDirection

Moves a div in both X and Y directions simultaneously.

Let’s Try →

Opacity and Position Combined

# react_motion/demo/OpacityPosition.jsx
import React from 'react';
import { Motion, spring } from 'react-motion';

function OpacityPosition() {
    return (
        <Motion defaultStyle={{ x: 0, opacity: 0 }} style={{ x: spring(300), opacity: spring(1) }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'lime', transform: `translateX(${style.x}px)`, opacity: style.opacity }} />
        )}
        </Motion>
    )
}

export default OpacityPosition

Animates opacity and horizontal movement together.

Let’s Try →

Frequently Asked Questions about React-motion

What is React-motion?

What are the primary use cases for React-motion?

Animating component style changes (e.g., width, height, opacity). Enter/exit animations for lists and items. Sliding panels or modals. Interactive hover and drag effects. Smooth state transitions in React apps

What are the strengths of React-motion?

Natural, physics-based motion without manual easing curves. Declarative and composable within React components. Smooth handling of dynamic layout changes. Lightweight and minimal API. Active open-source community and examples

What are the limitations of React-motion?

No built-in gesture/drag handling (requires additional libraries). Performance may degrade with large numbers of animated elements. Lacks advanced timeline or sequencing controls like GSAP. Primarily focused on style animations, not SVG or 3D. Requires React environment

How can I practice React-motion typing speed?

CodeSpeedTest offers 10+ real React-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 React Motion Animation

# react_motion/demo/App.jsx
import React from 'react';
import { Motion, spring } from 'react-motion';

function App() {
    return (
        <Motion defaultStyle={{ x: 0 }} style={{ x: spring(300) }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'orange', transform: `translateX(${style.x}px)` }} />
        )}
        </Motion>
    );
}

export default App

A basic React Motion example animating a div element moving horizontally using spring physics.

Let’s Try →

Vertical Slide Animation

# react_motion/demo/VerticalSlide.jsx
import React from 'react';
import { Motion, spring } from 'react-motion';

function VerticalSlide() {
    return (
        <Motion defaultStyle={{ y: 0 }} style={{ y: spring(200) }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'green', transform: `translateY(${style.y}px)` }} />
        )}
        </Motion>
    );
}

export default VerticalSlide

Animates a div sliding vertically using spring physics.

Let’s Try →

Opacity Fade Animation

# react_motion/demo/Fade.jsx
import React from 'react';
import { Motion, spring } from 'react-motion';

function Fade() {
    return (
        <Motion defaultStyle={{ opacity: 0 }} style={{ opacity: spring(1) }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'purple', opacity: style.opacity }} />
        )}
        </Motion>
    );
}

export default Fade

Animates a div fading in using React Motion.

Let’s Try →

Scale Up Animation

# react_motion/demo/ScaleUp.jsx
import React from 'react';
import { Motion, spring } from 'react-motion';

function ScaleUp() {
    return (
        <Motion defaultStyle={{ scale: 0.5 }} style={{ scale: spring(1) }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'red', transform: `scale(${style.scale})` }} />
        )}
        </Motion>
    );
}

export default ScaleUp

Animates a div scaling up smoothly using spring.

Let’s Try →

Diagonal Slide Animation

# react_motion/demo/DiagonalSlide.jsx
import React from 'react';
import { Motion, spring } from 'react-motion';

function DiagonalSlide() {
    return (
        <Motion defaultStyle={{ x: 0, y: 0 }} style={{ x: spring(150), y: spring(150) }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'blue', transform: `translate(${style.x}px, ${style.y}px)` }} />
        )}
        </Motion>
    );
}

export default DiagonalSlide

Moves a div diagonally using React Motion spring physics.

Let’s Try →

Spring Rotation Animation

# react_motion/demo/Rotate.jsx
import React from 'react';
import { Motion, spring } from 'react-motion';

function Rotate() {
    return (
        <Motion defaultStyle={{ rotate: 0 }} style={{ rotate: spring(360) }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'teal', transform: `rotate(${style.rotate}deg)` }} />
        )}
        </Motion>
    );
}

export default Rotate

Rotates a div smoothly using spring animation.

Let’s Try →

Bounce Animation

# react_motion/demo/Bounce.jsx
import React from 'react';
import { Motion, spring } from 'react-motion';

function Bounce() {
    return (
        <Motion defaultStyle={{ y: 0 }} style={{ y: spring(100, { stiffness: 120, damping: 5 }) }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'pink', transform: `translateY(${style.y}px)` }} />
        )}
        </Motion>
    );
}

export default Bounce

Bounces a div up and down using React Motion.

Let’s Try →

Delayed Start Animation

# react_motion/demo/Delayed.jsx
import React, { useState, useEffect } from 'react';
import { Motion, spring } from 'react-motion';

function Delayed() {
    const [start, setStart] = useState(false)
    useEffect(() => { setTimeout(() => setStart(true), 1000) }, [])
    return (
        <Motion defaultStyle={{ x: 0 }} style={{ x: spring(start ? 200 : 0) }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'brown', transform: `translateX(${style.x}px)` }} />
        )}
        </Motion>
    )
}

export default Delayed

Delays the start of animation using setTimeout and spring.

Let’s Try →

Multi-Direction Animation

# react_motion/demo/MultiDirection.jsx
import React from 'react';
import { Motion, spring } from 'react-motion';

function MultiDirection() {
    return (
        <Motion defaultStyle={{ x: 0, y: 0 }} style={{ x: spring(200), y: spring(50) }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'cyan', transform: `translate(${style.x}px, ${style.y}px)` }} />
        )}
        </Motion>
    )
}

export default MultiDirection

Moves a div in both X and Y directions simultaneously.

Let’s Try →

Opacity and Position Combined

# react_motion/demo/OpacityPosition.jsx
import React from 'react';
import { Motion, spring } from 'react-motion';

function OpacityPosition() {
    return (
        <Motion defaultStyle={{ x: 0, opacity: 0 }} style={{ x: spring(300), opacity: spring(1) }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'lime', transform: `translateX(${style.x}px)`, opacity: style.opacity }} />
        )}
        </Motion>
    )
}

export default OpacityPosition

Animates opacity and horizontal movement together.

Let’s Try →

Frequently Asked Questions about React-motion

What is React-motion?

What are the primary use cases for React-motion?

What are the strengths of React-motion?

What are the limitations of React-motion?

How can I practice React-motion typing speed?

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