Slide
No library Beginner
Classic on/off toggle — the thumb slides with a spring overshoot and the track fades between colors. Pure CSS transitions, no dependencies.
Classic on/off toggle — the thumb slides with a spring overshoot and the track fades between colors. Pure CSS transitions, no dependencies.
Goal: Create a "Slide" toggle switch animation.
Visual behavior: A pill-shaped track (52×30px). A white circular thumb (22px) sits inside. On toggle: the thumb translates from left to right (or back) with a spring overshoot easing, and the track smoothly fades between an inactive color and an active color.
Technique:
- Single button with role="switch" and aria-checked bound to React state
- Track: background transitions with ease over 200ms
- Thumb: transform translateX transitions with cubic-bezier(0.34, 1.56, 0.64, 1) over 300ms — the 1.56 overshoot creates the spring bounce
Accessibility: role="switch", aria-checked={on}. Under prefers-reduced-motion, remove the transition from the thumb (motion-reduce:transition-none).
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.