Toggle Switch
Code
| 1 | // travel = track width - height, so the thumb hugs both edges symmetrically. |
| 2 | const travel = dims.width - dims.height; |
| 3 | |
| 4 | {/* Thumb — slides with a springy settle (outBack) + subtle squash */} |
| 5 | <Anime autoplay duration={360} ease="outBack" |
| 6 | translateX={isChecked ? travel : 0} |
| 7 | scaleX={[1, 1.12, 1]} |
| 8 | > |
| 9 | <div className="thumb" /> |
| 10 | </Anime> |
| 11 | |
| 12 | {/* Track — color cross-fade */} |
| 13 | <Anime autoplay duration={280} ease="outQuad" |
| 14 | backgroundColor={isChecked ? 'var(--landing-accent)' : 'var(--landing-surface)'} |
| 15 | > |
| 16 | <div className="track" /> |
| 17 | </Anime> |
| 18 | |
| 19 | {/* Ripple — remounted (key) on each toggle so it replays */} |
| 20 | <Anime key={rippleId} autoplay duration={420} ease="outQuad" |
| 21 | scale={[0.4, 1.6]} opacity={[0.5, 0]} |
| 22 | > |
| 23 | <div className="ripple" /> |
| 24 | </Anime> |
Springy toggle: track color cross-fade, thumb slide + squash, and a ripple on every flip.
Live preview
Toggle SwitchSpringy toggle + ripple
Primaryenabled
sm
md
lg
notifications
auto Save
analytics
Props
| Name | Type | Default | Description |
|---|---|---|---|
| translateX | number | - | Thumb travel (track width − height) |
| scaleX | number[] | [1, 1.12, 1] | Thumb squash on slide |
| backgroundColor | string | - | Track color by state |
| ease | string | 'outBack' | Springy settle for the thumb |
| autoplay | boolean | true | Plays on every state change |
| disabled | boolean | false | Disable interaction |
| size | 'sm'|'md'|'lg' | 'md' | Switch size |