Delayed Start Animation - React-motion Typing CST Test
Loading…
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.