Elastic Toggle Switch

An accessible switch whose knob squashes, overshoots and settles with an elastic Anime.js ease.

Original
Anime.js
Reduced-motion ready
Customisable
1.0 KB gzip

An original by PasteMotion · MIT License

WidthFull

Code

index.html

<label class="elastic-toggle">
  <button class="elastic-toggle__switch" type="button" role="switch" aria-checked="false" aria-labelledby="elastic-toggle-label">
    <span class="elastic-toggle__knob"></span>
  </button>
  <span class="elastic-toggle__label" id="elastic-toggle-label">Dark mode</span>
</label>

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 Anime.js from the CDN (see the JS tab), then add the script.
Adjust the custom properties (--accent, --color-2) on .elastic-toggle to restyle it without touching the rest.
Reduced-motion users are covered: the animation calms down or stops when that setting is on.