Check Pop
No library Beginner
A checkbox where the SVG checkmark springs into view with a scale overshoot (cubic-bezier spring) on check and collapses instantly on uncheck. No keyframes needed — pure CSS transition on the SVG transform.
A checkbox where the SVG checkmark springs into view with a scale overshoot (cubic-bezier spring) on check and collapses instantly on uncheck. No keyframes needed — pure CSS transition on the SVG transform.
Goal: Create a "Check Pop" checkbox animation.
Visual behavior: A 28×28px square checkbox (7px border-radius). Off state: transparent fill, white/25% border. On state: indigo (#6366f1) fill and border. The box fill and border transition smoothly (200ms ease). The SVG checkmark scales from 0 to 1 with a spring overshoot on check — cubic-bezier(0.34, 1.56, 0.64, 1) over 350ms making it pop/spring into view. On uncheck it scales back to 0 quickly (150ms ease-in). No CSS keyframes required — pure CSS transition on the SVG element's transform property.
Technique: React useState tracks checked state. The box uses CSS transitions for color. The SVG uses transform: scale(0/1) with different transition curves for in/out. transformOrigin is centered.
Accessibility: Hidden native <input type="checkbox">. Transitions respect prefers-reduced-motion when combined with a global motion rule.
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.