Learn REACT-MOTION with Real Code Examples

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

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

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

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

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

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

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

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

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

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