Spring & Easing Visualiser
Spring & Easing Visualiser
Tweak a spring or a cubic-bezier, see its curve and a live preview, then copy the Motion config.
0sovershoots 6%0.47s
Motion
import { motion } from "motion/react"
<motion.div
initial={{ x: 0 }}
animate={{ x: 240 }}
transition={{ type: "spring", stiffness: 500, damping: 30, mass: 1 }}
/>Presets
Spring
Stiffness500
Damping30
Mass1.0
Like this? There's a whole library.
Animated React components and blocks with live previews. Copy the code and make it yours.
- 51
- Components
- 17
- Blocks
- 1 / week
- New drops