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

React Spring is a powerful spring-physics-based animation library for React that enables smooth, natural, and interactive animations using declarative APIs and hooks.

View all 10 React-spring code examples →

Fade In Box Slide In From Left Scale Up Animation Rotate Box Opacity + Scale Combo Color Change Animation Bounce Effect Width Expansion Height Drop Down Interactive Hover Animation

Learn REACT-SPRING 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

Fade In Box

# react_spring/demo/App1.jsx
import React from 'react'
import { useSpring, animated } from 'react-spring'

function App() {
    const props = useSpring({
        opacity: 1,
        from: { opacity: 0 }
    })
    return <animated.div style={{ width:100, height:100, background:'red', ...props }} />
}

export default App

A div fades in on mount using useSpring.

Let’s Try →

Slide In From Left

# react_spring/demo/App2.jsx
import React from 'react'
import { useSpring, animated } from 'react-spring'

function App() {
    const props = useSpring({
        x: 0,
        from: { x: -200 }
    })
    return <animated.div style={{ width:120, height:120, background:'blue', transform:props.x.to(v => `translateX(${v}px)`) }} />
}

export default App

A box slides in horizontally.

Let’s Try →

Scale Up Animation

# react_spring/demo/App3.jsx
import React from 'react'
import { useSpring, animated } from 'react-spring'

function App() {
    const props = useSpring({
        scale: 1,
        from: { scale: 0.6 }
    })
    return <animated.div style={{ width:100, height:100, background:'green', transform:props.scale.to(s => `scale(${s})`) }} />
}

export default App

Scales a div from 0.6 to 1.

Let’s Try →

Rotate Box

# react_spring/demo/App4.jsx
import React from 'react'
import { useSpring, animated } from 'react-spring'

function App() {
    const props = useSpring({
        rotate: 360,
        from: { rotate: 0 }
    })
    return <animated.div style={{ width:100, height:100, background:'purple', transform:props.rotate.to(r => `rotate(${r}deg)`) }} />
}

export default App

A div rotates 360 degrees.

Let’s Try →

Opacity + Scale Combo

# react_spring/demo/App5.jsx
import React from 'react'
import { useSpring, animated } from 'react-spring'

function App() {
    const props = useSpring({
        opacity: 1,
        scale: 1,
        from: { opacity: 0, scale: 0.4 }
    })
    return <animated.div style={{ width:110, height:110, background:'orange', opacity:props.opacity, transform:props.scale.to(s => `scale(${s})`) }} />
}

export default App

Combines scaling and fading.

Let’s Try →

Color Change Animation

# react_spring/demo/App6.jsx
import React from 'react'
import { useSpring, animated } from 'react-spring'

function App() {
    const props = useSpring({
        bg: 'rgb(255,0,0)',
        from: { bg: 'rgb(0,0,255)' }
    })
    return <animated.div style={{ width:120, height:120, background:props.bg }} />
}

export default App

Changes background color smoothly.

Let’s Try →

Bounce Effect

# react_spring/demo/App7.jsx
import React from 'react'
import { useSpring, animated, config } from 'react-spring'

function App() {
    const props = useSpring({
        scale: 1,
        from: { scale: 0.3 },
        config: config.wobbly
    })
    return <animated.div style={{ width:100, height:100, background:'cyan', transform:props.scale.to(s => `scale(${s})`) }} />
}

export default App

A bouncy scaling effect.

Let’s Try →

Width Expansion

# react_spring/demo/App8.jsx
import React from 'react'
import { useSpring, animated } from 'react-spring'

function App() {
    const props = useSpring({
        w: 200,
        from: { w: 50 }
    })
    return <animated.div style={{ height:60, background:'black', width:props.w }} />
}

export default App

Expands width from 50px to 200px.

Let’s Try →

Height Drop Down

# react_spring/demo/App9.jsx
import React from 'react'
import { useSpring, animated } from 'react-spring'

function App() {
    const props = useSpring({
        h: 150,
        from: { h: 0 }
    })
    return <animated.div style={{ width:150, background:'pink', height:props.h }} />
}

export default App

Animates height from 0 to full height.

Let’s Try →

Interactive Hover Animation

# react_spring/demo/App10.jsx
import React, { useState } from 'react'
import { useSpring, animated } from 'react-spring'

function App() {
    const [hover, setHover] = useState(false)
    const props = useSpring({
        scale: hover ? 1.2 : 1,
        from: { scale: 1 }
    })
    return (
        <animated.div
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{ width:120, height:120, background:'yellow', transform:props.scale.to(s => `scale(${s})`) }}
        />
    )
}

export default App

Scales up when hovered.

Let’s Try →

Frequently Asked Questions about React-spring

What is React-spring?

React Spring is a powerful spring-physics-based animation library for React that enables smooth, natural, and interactive animations using declarative APIs and hooks.

What are the primary use cases for React-spring?

Animating React component transitions. Page transitions in single-page apps. Gesture-driven interactions (drag, hover, scroll). Animating SVGs and canvas elements. Choreographing complex multi-component animations

What are the strengths of React-spring?

Natural, physics-based motion. Flexible API for React developers. Composable and reusable animation hooks. Good integration with gesture libraries. Handles complex sequences and transitions

What are the limitations of React-spring?

React-only library. Steeper learning curve than simple CSS transitions. Not optimized for canvas/WebGL animations. Large-scale UI animations may need performance tuning. Limited timeline-based sequencing compared to GSAP

How can I practice React-spring typing speed?

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

Fade In Box

# react_spring/demo/App1.jsx
import React from 'react'
import { useSpring, animated } from 'react-spring'

function App() {
    const props = useSpring({
        opacity: 1,
        from: { opacity: 0 }
    })
    return <animated.div style={{ width:100, height:100, background:'red', ...props }} />
}

export default App

A div fades in on mount using useSpring.

Let’s Try →

Slide In From Left

# react_spring/demo/App2.jsx
import React from 'react'
import { useSpring, animated } from 'react-spring'

function App() {
    const props = useSpring({
        x: 0,
        from: { x: -200 }
    })
    return <animated.div style={{ width:120, height:120, background:'blue', transform:props.x.to(v => `translateX(${v}px)`) }} />
}

export default App

A box slides in horizontally.

Let’s Try →

Scale Up Animation

# react_spring/demo/App3.jsx
import React from 'react'
import { useSpring, animated } from 'react-spring'

function App() {
    const props = useSpring({
        scale: 1,
        from: { scale: 0.6 }
    })
    return <animated.div style={{ width:100, height:100, background:'green', transform:props.scale.to(s => `scale(${s})`) }} />
}

export default App

Scales a div from 0.6 to 1.

Let’s Try →

Rotate Box

# react_spring/demo/App4.jsx
import React from 'react'
import { useSpring, animated } from 'react-spring'

function App() {
    const props = useSpring({
        rotate: 360,
        from: { rotate: 0 }
    })
    return <animated.div style={{ width:100, height:100, background:'purple', transform:props.rotate.to(r => `rotate(${r}deg)`) }} />
}

export default App

A div rotates 360 degrees.

Let’s Try →

Opacity + Scale Combo

# react_spring/demo/App5.jsx
import React from 'react'
import { useSpring, animated } from 'react-spring'

function App() {
    const props = useSpring({
        opacity: 1,
        scale: 1,
        from: { opacity: 0, scale: 0.4 }
    })
    return <animated.div style={{ width:110, height:110, background:'orange', opacity:props.opacity, transform:props.scale.to(s => `scale(${s})`) }} />
}

export default App

Combines scaling and fading.

Let’s Try →

Color Change Animation

# react_spring/demo/App6.jsx
import React from 'react'
import { useSpring, animated } from 'react-spring'

function App() {
    const props = useSpring({
        bg: 'rgb(255,0,0)',
        from: { bg: 'rgb(0,0,255)' }
    })
    return <animated.div style={{ width:120, height:120, background:props.bg }} />
}

export default App

Changes background color smoothly.

Let’s Try →

Bounce Effect

# react_spring/demo/App7.jsx
import React from 'react'
import { useSpring, animated, config } from 'react-spring'

function App() {
    const props = useSpring({
        scale: 1,
        from: { scale: 0.3 },
        config: config.wobbly
    })
    return <animated.div style={{ width:100, height:100, background:'cyan', transform:props.scale.to(s => `scale(${s})`) }} />
}

export default App

A bouncy scaling effect.

Let’s Try →

Width Expansion

# react_spring/demo/App8.jsx
import React from 'react'
import { useSpring, animated } from 'react-spring'

function App() {
    const props = useSpring({
        w: 200,
        from: { w: 50 }
    })
    return <animated.div style={{ height:60, background:'black', width:props.w }} />
}

export default App

Expands width from 50px to 200px.

Let’s Try →

Height Drop Down

# react_spring/demo/App9.jsx
import React from 'react'
import { useSpring, animated } from 'react-spring'

function App() {
    const props = useSpring({
        h: 150,
        from: { h: 0 }
    })
    return <animated.div style={{ width:150, background:'pink', height:props.h }} />
}

export default App

Animates height from 0 to full height.

Let’s Try →

Interactive Hover Animation

# react_spring/demo/App10.jsx
import React, { useState } from 'react'
import { useSpring, animated } from 'react-spring'

function App() {
    const [hover, setHover] = useState(false)
    const props = useSpring({
        scale: hover ? 1.2 : 1,
        from: { scale: 1 }
    })
    return (
        <animated.div
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{ width:120, height:120, background:'yellow', transform:props.scale.to(s => `scale(${s})`) }}
        />
    )
}

export default App

Scales up when hovered.

Let’s Try →

Frequently Asked Questions about React-spring

What is React-spring?

React Spring is a powerful spring-physics-based animation library for React that enables smooth, natural, and interactive animations using declarative APIs and hooks.

What are the primary use cases for React-spring?

What are the strengths of React-spring?

Natural, physics-based motion. Flexible API for React developers. Composable and reusable animation hooks. Good integration with gesture libraries. Handles complex sequences and transitions

What are the limitations of React-spring?

How can I practice React-spring typing speed?

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