✅ Springy Switchbox | Checkbox toggle animation | @keyframers 2.0.0

index.html

<a href="https://youtu.be/VOmlp4k5T0A" target="_blank" data-keyframers-credit style="color: #444"></a>
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>

<div id="app">
  <label class="checker">
    <input class="checkbox" type="checkbox" />
    <div class="check-bg"></div>
    <div class="checkmark">
      <svg viewBox="0 0 100 100">
        <path d="M20,55 L40,75 L77,27" fill="none" stroke="#FFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
    </div>
  </label>
</div>

springy-switchbox-checkbox-toggle-animation-keyframers-2-0-0.markdown

✅ Springy Switchbox | Checkbox toggle animation | @keyframers 2.0.0

David Khourshid and Stephen Shaw spring back into Season 2 with this delightfully bouncy animation. Is it a checkbox? Is it a toggle? Is it a switch? All we know is that it's super fun to play with.

• ⏰ Streamed live at htps://twitch.tv/keyframers
• 💡 Inspiration: https://dribbble.com/shots/6266357-Checkboxswitcher
• 📺 Video: https://youtu.be/VOmlp4k5T0A
• 💻 Code: https://cdpn.io/pen/JVdxzz

A Pen by Sumon Islam on CodePen.

License.

style.scss

:root {
  --duration: .4s;
}

.checker {
  display: block;
  font-size: 20vmin;
  height: 1em;
  width: 2.5em;
  box-sizing: content-box;
  padding: 0.15em;
  border-radius: 0.25em;
  transition: transform var(--duration) ease;
  cursor: pointer;
}

.checkmark {
  width: 1em;
  height: 1em;
  transition: transform var(--duration) ease;
  transform: translateX(-.4em);

  z-index: 5;

  svg {
    display: block;
    background: #e5e5e5;
    transform: translateX(.4em);
    border-radius: 0.15em;

    transition: 
      background-color var(--duration) ease,
      transform calc(var(--duration) * 1.5) ease;

    path {
      // opacity: 0;
      stroke-dasharray: 90 90;
      stroke-dashoffset: 90;
      transition: stroke-dashoffset calc(var(--duration) / 3) linear calc(var(--duration) / 3);
    }

  }
}

.checkbox {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.4;
  visibility: hidden;

  &:checked {
    ~ .checkmark {
      transform: translate(1.9em);

      svg {
        background: #77c44c;
        transform: translate(-.4em);
        path { stroke-dashoffset: 0; }
      }
    }
  }
}

.check-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: white;
  z-index: 2;

  &:before,
  &:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: inherit;
  }

  &:after {
    background: white;
  }

  &:before {
    transition: transform var(--duration) ease;
    transform: translateY(30%);
    transform-origin: bottom center;
    background: black;
    filter: blur(.25em);
    opacity: 0.2;
    z-index: -1;
  }
}

.checker.checker {
  
  &:active {
    transform: scale(0.85); 
    transition-duration: calc(var(--duration) / 2);
    
    .check-bg::before {
      transform: translateY(0) scale(0.8);
      opacity: 0.2;
    }
  }
}

// --------------------------

*,
*::before,
*::after {
  box-sizing: border-box;
  position: relative;
}

html {
  height: 100%;
}

body {
  background-color: #f2f2f2;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}