Skip to main content
CodeSpeedTest
Languages
Start TypingJump into a test — pick any languageAdaptive TrainingUnlock chars as you master themPractice DrillsFocused sessions targeting weak spotsDaily ChallengesNew coding challenges every dayRace ModeCompete against others in real timeAI OpponentRace against an AI at your WPM levelTournamentsLive coding speed tournamentsArcade GamesZType, Overkill Survival, Glyphica & moreGamificationXP, coins, badges & quests
LeaderboardGlobal rankings for every languageCertificatesEarn verifiable Bronze / Silver / Gold certsActivityDaily streaks & historical analyticsProfileYour stats, badges & achievements
Browse Languages500+ languages with real code examplesBlogTips, guides & deep divesFree ToolsWPM calculator, typing speed report & moreFAQCommon questions answeredGetting StartedNew to CodeSpeedTest?AboutOur story & missionSupportGet help — Pro users get priorityContactGet in touch with the team
Pricing
  1. Home
  2. /
  3. Learn
  4. /
  5. React-motion

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 AnimationVertical Slide AnimationOpacity Fade AnimationScale Up AnimationDiagonal Slide AnimationSpring Rotation AnimationBounce AnimationDelayed Start AnimationMulti-Direction AnimationOpacity and Position Combined

Learn REACT-MOTION with Real Code Examples

Updated Nov 26, 2025

Explain

React Motion uses a spring-based model for animations, which creates more natural and fluid motion.

It abstracts complex animation math so developers can animate component styles declaratively.

Supports enter/exit animations for dynamic components.

Integrates seamlessly with React’s component architecture and state.

Allows combining multiple animated values for complex UI transitions.

Core Features

Spring component - animates a single or multiple style values

TransitionMotion - handles enter/leave animations

StaggeredMotion - animates sequences of items in staggered order

Interpolate function - computes animated style values

Integration with React state for dynamic updates

Basic Concepts Overview

Motion - animates a single component or style value

Spring - configuration for animation dynamics

TransitionMotion - for animating lists with enter/exit behaviors

StaggeredMotion - sequence animations for multiple components

Interpolated styles - calculated from spring engine per frame

Project Structure

components/ - animated React components

hooks/ - optional hooks for managing animation state

App.js / index.js - main React entry point

styles/ - CSS for non-animated elements

utils/ - reusable animation helpers and spring configs

Building Workflow

Identify components or style properties to animate

Wrap them in Motion/TransitionMotion/StaggeredMotion

Configure spring parameters for desired motion behavior

Update target styles via React state or props

Optionally use interpolation functions for complex calculations

Difficulty Use Cases

Beginner: animate single numeric style property

Intermediate: animate multiple properties simultaneously

Advanced: enter/exit animations for dynamic lists

Expert: sequence animations using StaggeredMotion

Architect: integrate physics-based animations across complex UI

Comparisons

React Motion vs CSS transitions: physics-based vs fixed-duration

React Motion vs Framer Motion: simpler API vs advanced timeline features

React Motion vs GSAP: React integration vs standalone animation control

React Motion vs React Spring: similar spring physics approach, slightly different API

React Motion vs Anime.js: DOM/JS animation vs React component-centric animations

Versioning Timeline

2015 - React Motion open-sourced by Cheng Lou

2016 - StaggeredMotion and TransitionMotion introduced

2017 - Minor bug fixes and TypeScript typings added

2019 - Community contributions stabilize API

2025 - Still widely used, though React Spring and Framer Motion also popular

Glossary

Motion - animates a single component or style

TransitionMotion - animates lists with enter/exit behaviors

StaggeredMotion - staggered sequence animations

Spring - physics-based target configuration

Interpolated - current style values computed per frame

Installation Setup

Install via npm: `npm install react-motion`

Import required components: `import { Motion, spring } from 'react-motion';`

Wrap elements with `<Motion>` or `<TransitionMotion>` components

Define style properties to animate and target values

Use spring function to configure stiffness, damping, and precision

Environment Setup

React development environment

Node.js installed

Browser with modern JS support

Optional: TypeScript for typing

Optional: integration with build tools like Webpack/Vite

Config Files

package.json - dependency management

App.js / index.js - main React app

components/ - animated components

styles/ - CSS for layout and non-animated elements

hooks/ - optional animation state helpers

Cli Commands

npm install react-motion

npm start or yarn start to run React app

npm run build to deploy

Use TypeScript with tsc if preferred

Lint and test animations during development

Internationalization

Animations themselves are language-agnostic

Dynamic content can be localized via React props

Sequence timing unaffected by locale

Text content animated via style props remains translatable

Can integrate with i18n frameworks like react-i18next

Accessibility

Animations should not impede usability

Provide alternatives for motion-sensitive users

Avoid excessive motion or flashing

Focus management remains independent of animation

ARIA attributes can be applied normally

Ui Styling

Styles applied via JS style objects

Can integrate with CSS-in-JS or traditional CSS

DOM elements remain fully controllable

Motion only affects animated properties

Responsive adjustments handled via React state or media queries

State Management

React state triggers Motion updates

Animated style values derived from interpolated object

TransitionMotion handles dynamic list changes

StaggeredMotion sequences multiple items

No external state management needed unless app requires it

Data Management

Animation targets stored in React state

Current style values provided via interpolated object

Can integrate with external data for dynamic animations

No persistent storage required for animation state

Supports dynamic list updates for interactive UIs

Architecture

React component-based architecture

Spring engine calculates values per frame

Interpolation layer converts physics to style values

React reconciler applies updated styles to DOM

Optional callbacks for animation lifecycle events

Rendering Model

Spring engine calculates interpolated values per frame

React reconciler applies updated styles to DOM elements

Motion/TransitionMotion/StaggeredMotion define which values to animate

Interpolated values passed to render function

React state triggers animation target updates

Architectural Patterns

Declarative component wrapper pattern

Spring physics engine for animation

Interpolation function converts physics to DOM styles

Supports sequences and dynamic list changes

Integration-ready with React state and props

Real World Architectures

Sliding sidebars and modals

Accordion or tab animations

List item enter/exit transitions

Hover effects on interactive components

Dashboard widgets with dynamic value changes

Design Principles

Physics-based, natural motion

Declarative React integration

Composable and lightweight

Simple API for multiple animated properties

Predictable behavior and smooth transitions

Scalability Guide

Use memoization for interpolated values if needed

Limit simultaneous animations for large lists

Optimize React re-renders by isolating animated components

Batch style updates within Motion

Consider alternative libraries for high-complexity animations

Migration Guide

Replace CSS transitions with Motion for physics-based feel

Refactor component state updates to trigger Motion targets

Replace manual list animations with TransitionMotion

StaggeredMotion can replace sequential setTimeout animations

Test performance and smoothness across browsers

Performance Notes

Batch multiple animations when possible

Limit number of simultaneously animated elements

Avoid unnecessary re-renders outside animated components

Leverage shouldComponentUpdate or React.memo for performance

Profile animations in Chrome DevTools if lag occurs

Security Notes

No unsafe operations by default

Runs in browser DOM sandbox

No access to system files or network

Safe for production React apps

Do not execute untrusted code within Motion children

Monitoring Analytics

Profile FPS for smoothness

Log spring values for debugging

Monitor memory usage for large lists

Test mobile performance

Validate UI consistency during rapid state changes

Code Quality

Keep Motion wrappers focused and minimal

Document spring configurations for reuse

Use consistent keys for list items in TransitionMotion

Test animations across browsers

Ensure React state updates trigger proper animations

Practical Examples

Animate a div width from 0 to 100%

Fade in/out components using opacity

Staggered list item entrance

Slide a panel in/out with dynamic height

Hover effect with spring-based movement

Troubleshooting

Ensure target values are numbers (cannot animate strings directly)

Check React state updates trigger Motion re-renders

Debug stiffness/damping parameters for smoothness

Confirm proper keys for TransitionMotion items

Use console to inspect interpolated style values

Testing Guide

Test animations in development with React DevTools

Ensure spring parameters produce desired smoothness

Verify transitions work for all screen sizes

Check list animations maintain keys properly

Simulate state changes to ensure animations behave correctly

Deployment Options

Include as dependency in React project

Use tree-shaking to reduce bundle size

Bundle with Webpack, Vite, or Create React App

Deploy React app with animated components normally

Ensure production optimization for smooth performance

Tools Ecosystem

React Motion library

Spring function for physics configuration

React Developer Tools for debugging

Storybook for component animation testing

Integration with CSS-in-JS libraries (styled-components, Emotion)

Integrations

React apps for component animations

React Router transitions

List animations in dashboards and tables

Integrate with GSAP or anime.js for complex sequences

Combine with gesture libraries (react-use-gesture) for drag animations

Productivity Tips

Reuse spring configurations for consistency

Use TransitionMotion for dynamic lists

Avoid unnecessary nested Motion components

Combine multiple style properties in one Motion for efficiency

Profile performance early for large-scale animations

Challenges

Balancing spring parameters for natural motion

Animating dynamic lists without jitter

Managing multiple simultaneous animations

Integrating animations with React state updates

Ensuring cross-browser smooth performance

Learning Path

Learn basic React component and state concepts

Understand Motion and spring API

Animate single components

Animate dynamic lists with TransitionMotion

Combine multiple springs for complex UI transitions

Skill Improvement Plan

Week 1: single property Motion animations

Week 2: multiple properties and style objects

Week 3: enter/exit animations with TransitionMotion

Week 4: staggered animations with StaggeredMotion

Week 5: integrate animations across full React app

Interview Questions

Explain how React Motion achieves physics-based animations.

How do you animate multiple style properties simultaneously?

What is TransitionMotion and how does it work?

How would you implement a staggered list animation?

Compare React Motion with CSS transitions and GSAP.

Cheat Sheet

<Motion defaultStyle={{x: 0}} style={{x: spring(100)}}>{interpolated => <div style={{transform: `translateX(${interpolated.x}px)`}}/>}</Motion>

<TransitionMotion willEnter={...} willLeave={...} styles={...}>{interpolated => ...}</TransitionMotion>

spring(value, {stiffness, damping, precision}) - configure animation dynamics

StaggeredMotion - sequence multiple animations

interpolated - current animated style values passed to render

Books

React Motion Quickstart Guide

Animating React Components

Physics-Based Animations in React

Advanced React UI Motion Patterns

React Animation Recipes

Tutorials

Animating single properties with Motion

List animations with TransitionMotion

Sequencing animations with StaggeredMotion

Integrating physics-based animations in React UI

Optimizing React Motion for performance

Official Docs

https://github.com/chenglou/react-motion

https://reactcommunity.org/react-motion/

Community Links

GitHub React Motion repo

StackOverflow React Motion tag

Reactiflux Discord community

YouTube tutorials and demos

Medium articles on React animations

Community Support

React Motion GitHub repository

StackOverflow React Motion tag

Reactiflux Discord community

YouTube tutorials

Medium articles and blog posts on React animation

Monetization

Premium UI libraries with React Motion animations

Interactive dashboards and widgets

Web apps with polished UX transitions

Component libraries for teams

Animation templates or plugins

Future Roadmap

Better React concurrent mode support

Improved hooks-based API

Integration examples with Framer Motion and React Spring

Enhanced TypeScript typings and docs

Community-driven pattern library for common transitions

When Not To Use

Simple hover/focus effects -> CSS may suffice

High-performance animations for dozens of elements -> React Spring or GSAP may be better

Complex timeline sequences -> GSAP preferred

SVG path morphing -> specialized libraries may be better

3D or canvas animations -> use Three.js or PixiJS

Final Summary

React Motion brings physics-based animations to React apps.

Spring-based dynamics make transitions smooth and natural.

Supports single components, lists, and staggered sequences.

Declarative API integrates seamlessly with React state and props.

Ideal for UI transitions, hover effects, and interactive component motion.

Faq

Is React Motion still maintained? -> Minimal maintenance, but widely used

Can it animate multiple properties? -> Yes, using style object

Does it require React? -> Yes, React components only

Is it suitable for production? -> Yes, lightweight and reliable

Can it replace GSAP? -> For simple React animations, yes; for complex timelines, GSAP may be better

Code Sample Descriptions

1

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 →
2

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 →
3

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 →
4

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 →
5

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 →
6

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 →
7

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 →
8

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 →
9

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 →
10

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?

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.

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

CReactPythonC++RustTypeScriptKotlinPHPJavaC#RubyMqlCqlN1qlCypherGremlinPartiqlHaskellElixirFsharpView all languages →
CodeSpeedTest

Improve your coding speed, code accuracy, and programming syntax WPM with practice sessions across 500+ programming languages.

Quick Links

HomeAboutFeaturesGetting StartedLanguages

Legal & Support

Pro ⚡ PricingContactPrivacy PolicyTerms of Service

Connect

CodeSpeedTest on GitHubCodeSpeedTest on TwitterEmail CodeSpeedTest

© 2026 CodeSpeedTest. All rights reserved.