# Toggle Switch > Animated toggle switch with spring physics built using Svelte Motion. Demonstrates layout animations and gesture-driven state transitions. **Source:** [https://motion.svelte.page/examples/toggle-switch](https://motion.svelte.page/examples/toggle-switch) **Markdown mirror:** [https://motion.svelte.page/examples/toggle-switch.md](https://motion.svelte.page/examples/toggle-switch.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: toggle switch. A single `layout` prop turns a CSS flex flip into a smooth FLIP animation. Each direction picks its own transition — snappy spring on the way up, playful bounce on the way down. **Metadata:** tag: `LAYOUT` | pattern: `flip-toggle` ### Notes - Flipping `align-items` between `flex-end` and `flex-start` reflows the ball — adding `layout` on the `motion.div` turns the resulting CSS reflow into a measured FLIP animation. - Transitions are per-direction. `spring` with high stiffness on the way up gives a confident snap; a custom `bounceEase` on the way down lets the ball settle playfully. - The transition value is typed as `MotionTransition` — passing a custom easing function (anything `(t: number) => number`) works just as well as the built-in keywords. ### Source #### Default.svelte Source file: [src/lib/examples/toggle-switch/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/toggle-switch/demos/Default.svelte) ```svelte
// toggle-switch state: {isOn ? 'on' : 'off'}
(isOn = !isOn)} type="button" aria-label={isOn ? 'Turn off' : 'Turn on'} whileHover={{ backgroundColor: 'var(--brut-accent-soft, rgba(36, 119, 104, 0.1))' }} style={styleString(() => ({ width: 80, height: 200, display: 'flex', alignItems: isOn ? 'flex-start' : 'flex-end', padding: 10, border: '1px solid var(--brut-ink, #0a0a0a)', background: 'var(--brut-bg-2, #eef4f1)', boxShadow: '6px 6px 0 var(--brut-rule, #d6dedb)', cursor: 'pointer' }))} > ({ width: 60, height: 60, background: 'var(--brut-accent, #247768)', border: '1px solid var(--brut-ink, #0a0a0a)', boxShadow: '4px 4px 0 var(--brut-rule, #d6dedb)', willChange: 'transform' }))} >
up: spring 700/30 {isOn ? 'transition: spring' : 'transition: bounce'}
```