Elastic Toggle Switch
Toggles · PasteMotion original
- Original
- Vanilla JS
- Reduced-motion ready
Sliding Pill Tabs
A segmented control whose pill springs to the selected tab, with full keyboard support. Motion.
- Original
- Motion
- Reduced-motion ready
- Customisable
- 1.5 KB gzip
An original by PasteMotion · MIT License
Code
<div class="sliding-tabs">
<div class="sliding-tabs__list" role="tablist" aria-label="Billing period">
<span class="sliding-tabs__pill" aria-hidden="true"></span>
<button class="sliding-tabs__tab" role="tab" type="button" aria-selected="true" id="sliding-tabs-monthly" aria-controls="sliding-tabs-panel">Monthly</button>
<button class="sliding-tabs__tab" role="tab" type="button" aria-selected="false" id="sliding-tabs-yearly" aria-controls="sliding-tabs-panel" tabindex="-1">Yearly</button>
<button class="sliding-tabs__tab" role="tab" type="button" aria-selected="false" id="sliding-tabs-lifetime" aria-controls="sliding-tabs-panel" tabindex="-1">Lifetime</button>
</div>
<p class="sliding-tabs__panel" id="sliding-tabs-panel" role="tabpanel" aria-labelledby="sliding-tabs-monthly">$12 billed every month</p>
</div>
How to use it
- Paste the HTML where the animation should appear.
- Add the CSS to your stylesheet. Every class starts with the animation's name, so it won't clash with yours.
- Load Motion from the CDN (see the JS tab), then add the script.
- Adjust the custom properties (--accent, --color-2) on .sliding-tabs to restyle it without touching the rest.
- Reduced-motion users are covered: the animation calms down or stops when that setting is on.
Related animations
Pulsing Fading Checkbox
Toggles · @catraco
- GPU-friendly
- No JS
Pulsing Switch
Toggles · @Type-Delta
- GPU-friendly
- No JS
- Reduced-motion ready
Pulsing Fading Switch
Toggles · @Type-Delta
- GPU-friendly
- No JS
- Reduced-motion ready
Like Heart Switch
Toggles · @TroyRandall
- GPU-friendly
- No JS
- Reduced-motion ready
Active Like Checkbox
Toggles · @SalladShooter
- GPU-friendly
- No JS
- Reduced-motion ready