Mode:
Duration:
1
Coding works best on desktop or with an external keyboard.
Delayed Start Animation - React-motion Typing CST Test
Delayed Start Animation — React-motion Code
Delays the start of animation using setTimeout and spring.
# 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 DelayedReact-motion Language Guide
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.
Primary Use Cases
- ▸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
Notable Features
- ▸Spring-based animations for natural motion
- ▸Declarative API integrated with React
- ▸Interpolates multiple style values simultaneously
- ▸Supports dynamic updates to animation targets
- ▸Lightweight and composable
Origin & Creator
React Motion was created by Cheng Lou and open-sourced in 2015, becoming widely adopted for physics-based React animations.
Industrial Note
React Motion is used in web apps, dashboards, interactive UIs, and websites where smooth, physics-based motion improves user experience, such as sliding panels, accordions, loaders, and transitions.
Quick 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
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
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
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
Strengths
- ▸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
Limitations
- ▸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
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
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
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
30-Day Skill 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
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.
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
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
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
Basic Concepts
- ▸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