Flip
No library Intermediate
The thumb squishes flat at mid-travel then snaps back — like a coin flipping — as it moves between positions. Cyan track on active state. No dependencies.
The thumb squishes flat at mid-travel then snaps back — like a coin flipping — as it moves between positions. Cyan track on active state. No dependencies.
Goal: Create a "Flip" toggle animation.
Visual behavior: A standard pill toggle (52×30px) but the thumb plays a coin-flip animation when toggled. The thumb squishes to near-zero scaleX at its midpoint, teleports to the destination X position at the squish frame, then expands back to scaleX(1) — giving the illusion of a card or coin flipping. Track turns cyan (#22d3ee) when active.
Technique: Two CSS @keyframes: thumb-flip-right (0px → squish at 11px → 22px) and thumb-flip-left (reverse). React state tracks on/off and an animKey integer. On each toggle, animKey increments to force a new key on the thumb span, re-triggering the animation. The direction state determines which keyframe to play. Animation duration 320ms, ease-in-out. prefers-reduced-motion: animation-duration 0ms.
Accessibility: role="switch", aria-checked. Animation-duration set to 0ms under prefers-reduced-motion so thumb jumps instantly.
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.