Spring
Framer Light Intermediate framer-motion
Framer Motion spring physics drives both the thumb position and the track color — the thumb overshoots and bounces back with genuine physical weight.
Framer Motion spring physics drives both the thumb position and the track color — the thumb overshoots and bounces back with genuine physical weight.
Goal: Create a "Spring" toggle switch animation using framer-motion.
Visual behavior: A pill-shaped toggle. The white thumb moves with genuine spring physics — it overshoots the destination and bounces back with real physical weight. The track background color interpolates smoothly as the thumb travels (driven by the same spring value), so the color reflects exactly where the thumb is, not just the final on/off state.
Technique:
- useSpring(targetX, { stiffness: 500, damping: 20, mass: 0.6 }) where targetX = 22 (on) or 0 (off)
- useTransform(x, [0, 22], [inactiveColor, activeColor]) to drive the track background from the same spring value
- Apply style={{ x }} on motion.span for the thumb, style={{ background: bg }} on motion.button for the track
Accessibility: useReducedMotion() — if true, set damping to 100 so the spring snaps without bounce.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Dependency required: framer-motion.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.