cross-browser liquid toggle— drag/tap 🤙

cross-browser-liquid-toggle-drag-tap.markdown

cross-browser liquid toggle— drag/tap 🤙

A Pen by Jhey on CodePen.

License.

index.html

<button aria-label="toggle" aria-pressed="false" class="liquid-toggle">
      <!-- <div class="knockout knockout--debug">
        <div class="indicator indicator--masked">
          <div class="mask"></div>
        </div>
      </div> -->
      <div class="knockout">
        <div class="indicator indicator--masked">
          <div class="mask"></div>
        </div>
      </div>
      <!-- <div class="indicator"></div> -->
      <div class="indicator__liquid">
        <div class="shadow"></div>
        <div class="wrapper">
          <div class="liquids">
            <div class="liquid__shadow"></div>
            <div class="liquid__track"></div>
          </div>
        </div>
        <div class="cover"></div>
      </div>
    </button>
    <svg class="sr-only" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <filter id="goo">
          <feGaussianBlur
            id="SvgjsFeGaussianBlur1000"
            result="SvgjsFeGaussianBlur1000"
            in="SourceGraphic"
            stdDeviation="13"
          ></feGaussianBlur>
          <feColorMatrix
            id="SvgjsFeColorMatrix1001"
            result="SvgjsFeColorMatrix1001"
            in="SvgjsFeGaussianBlur1000"
            values="
                1 0 0 0 0
                0 1 0 0 0
                0 0 1 0 0
                0 0 0 13 -10
            "
            type="matrix"
          ></feColorMatrix>
          <feComposite
            id="SvgjsFeComposite1002"
            result="SvgjsFeComposite1002"
            in="SvgjsFeColorMatrix1001"
            operator="atop"
          ></feComposite>
        </filter>
        <filter id="knockout" colorInterpolationFilters="sRGB">
          <feColorMatrix
            result="knocked"
            type="matrix"
            values="1 0 0 0 0
                    0 1 0 0 0
                    0 0 1 0 0
                    -1 -1 -1 1 0"
          />
          <feComponentTransfer>
            <feFuncR type="linear" slope="3" intercept="-1" />
            <feFuncG type="linear" slope="3" intercept="-1" />
            <feFuncB type="linear" slope="3" intercept="-1" />
          </feComponentTransfer>
          <feComponentTransfer>
            <feFuncR type="table" tableValues="0 0 0 0 0 1 1 1 1 1" />
            <feFuncG type="table" tableValues="0 0 0 0 0 1 1 1 1 1" />
            <feFuncB type="table" tableValues="0 0 0 0 0 1 1 1 1 1" />
          </feComponentTransfer>
        </filter>
        <filter id="remove-black" color-interpolation-filters="sRGB">
          <feColorMatrix
            type="matrix"
            values="1 0 0 0 0
                      0 1 0 0 0
                      0 0 1 0 0
                      -255 -255 -255 0 1"
            result="black-pixels"
          />
          <feMorphology
            in="black-pixels"
            operator="dilate"
            radius="0.5"
            result="smoothed"
          />
          <feComposite in="SourceGraphic" in2="smoothed" operator="out" />
        </filter>
      </defs>
    </svg>
    <a
      aria-label="Follow Jhey"
      class="bear-link"
      href="https://twitter.com/intent/follow?screen_name=jh3yy"
      target="_blank"
      rel="noreferrer noopener"
    >
      <svg
        class="w-9"
        viewBox="0 0 969 955"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <circle
          cx="161.191"
          cy="320.191"
          r="133.191"
          stroke="currentColor"
          stroke-width="20"
        ></circle>
        <circle
          cx="806.809"
          cy="320.191"
          r="133.191"
          stroke="currentColor"
          stroke-width="20"
        ></circle>
        <circle
          cx="695.019"
          cy="587.733"
          r="31.4016"
          fill="currentColor"
        ></circle>
        <circle
          cx="272.981"
          cy="587.733"
          r="31.4016"
          fill="currentColor"
        ></circle>
        <path
          d="M564.388 712.083C564.388 743.994 526.035 779.911 483.372 779.911C440.709 779.911 402.356 743.994 402.356 712.083C402.356 680.173 440.709 664.353 483.372 664.353C526.035 664.353 564.388 680.173 564.388 712.083Z"
          fill="currentColor"
        ></path>
        <rect
          x="310.42"
          y="448.31"
          width="343.468"
          height="51.4986"
          fill="#FF1E1E"
        ></rect>
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M745.643 288.24C815.368 344.185 854.539 432.623 854.539 511.741H614.938V454.652C614.938 433.113 597.477 415.652 575.938 415.652H388.37C366.831 415.652 349.37 433.113 349.37 454.652V511.741L110.949 511.741C110.949 432.623 150.12 344.185 219.845 288.24C289.57 232.295 384.138 200.865 482.744 200.865C581.35 200.865 675.918 232.295 745.643 288.24Z"
          fill="currentColor"
        ></path>
      </svg>
    </a>

script.babel

import gsap from 'https://cdn.skypack.dev/gsap@3.13.0'
import Draggable from 'https://cdn.skypack.dev/gsap@3.13.0/Draggable'
import { Pane } from 'https://cdn.skypack.dev/tweakpane@4.0.4'

gsap.registerPlugin(Draggable)

const toggle = document.querySelector('.liquid-toggle')
const config = {
  theme: 'light',
  complete: 0,
  active: false,
  deviation: 2,
  alpha: 16,
  bounce: true,
}

const ctrl = new Pane({
  title: 'config',
})

const update = () => {
  gsap.set('#goo feGaussianBlur', {
    attr: {
      stdDeviation: config.deviation,
    },
  })
  gsap.set('#goo feColorMatrix', {
    attr: {
      values: `
        1 0 0 0 0
        0 1 0 0 0
        0 0 1 0 0
        0 0 0 ${config.alpha} -10
      `,
    },
  })
  document.documentElement.dataset.theme = config.theme
  document.documentElement.dataset.active = config.active
  document.documentElement.dataset.bounce = config.bounce
  toggle.style.setProperty('--complete', config.complete)
}

const sync = (event) => {
  if (
    !document.startViewTransition ||
    event.target.controller.view.labelElement.innerText !== 'theme'
  )
    return update()
  document.startViewTransition(() => update())
}

ctrl.addBinding(config, 'complete', {
  min: 0,
  max: 100,
  label: 'complete (%)',
  step: 1,
})

ctrl.addBinding(config, 'active')

const settings = ctrl.addFolder({
  title: 'settings',
  disabled: false,
  expanded: false,
})
settings.addBinding(config, 'deviation', {
  min: 0,
  max: 50,
  step: 1,
  label: 'stdDeviation',
})
settings.addBinding(config, 'alpha', {
  min: 0,
  max: 50,
  step: 1,
  label: 'alpha',
})
ctrl.addBinding(config, 'bounce')
ctrl.addBinding(config, 'theme', {
  label: 'theme',
  options: {
    system: 'system',
    light: 'light',
    dark: 'dark',
  },
})

ctrl.on('change', sync)
update()
// this is the CSS from going :active
// .liquid-toggle:active .indicator--masked .mask {
//   height: calc((100% - (2 * var(--border))) * 1.65);
//   width: calc((60% - (2 * var(--border))) * 1.65);
//   margin-left: calc((60% - (2 * var(--border))) * -0.325);
//   /* we can't use scale because of Safari flashing the mask color on change... */
//   /* scale: 1.65; */
// }
// .liquid-toggle:active .indicator__liquid {
//   scale: 1.65;
// }

// .liquid-toggle:active .wrapper {
//   filter: blur(0px);
// }

// .liquid-toggle:active .indicator__liquid .shadow {
//   opacity: 1;
// }

// .liquid-toggle:active .indicator__liquid .cover {
//   opacity: 0;
// }

// .liquid-toggle:active .indicator__liquid .liquid__track {
//   left: calc(var(--border) * 3);
//   height: calc((var(--height) * 1px) - (6 * var(--border)));
// }
// the actual interaction we're going to do with GSAP here because I can't be bothered
// to manage a CSS timeline for this with the bounce lol
const toggleState = async () => {
  toggle.dataset.active = true
  // if we use wiggle, don't await, instead jus' set a delay
  await Promise.allSettled(
    !config.bounce
      ? toggle.getAnimations({ subtree: true }).map((a) => a.finished)
      : []
  )
  // if it was a click, do a toggle timeline
  // else run a timeline and swap out the aria-pressed attribute
  // 1. scale up
  // 2. slide across
  // 3. bounce the scale depending on direction
  // 4. scale back down
  const pressed = toggle.matches('[aria-pressed=true]')
  gsap
    .timeline({
      onComplete: () => {
        gsap.delayedCall(0.05, () => {
          toggle.dataset.active = false
          toggle.setAttribute(
            'aria-pressed',
            !toggle.matches('[aria-pressed=true]')
          )
        })
      },
    })
    .to(toggle, {
      '--complete': pressed ? 0 : 100,
      duration: 0.15,
      delay: config.bounce ? 0.2 : 0,
    })
  // .fromTo(
  //   '.indicator__liquid',
  //   {
  //     '--scale-x': 1,
  //     '--scale-y': 1,
  //   },
  //   {
  //     '--scale-x': 1.1,
  //     '--scale-y': 1.1,
  //     duration: 0.05,
  //     repeat: 1,
  //     repeatDelay: 0.15,
  //     yoyo: true,
  //   },
  //   0
  // )
}
// toggle.addEventListener('click', toggleState)
const proxy = document.createElement('div')
Draggable.create(proxy, {
  allowContextMenu: true,
  handle: '.liquid-toggle',
  onDragStart: function () {
    // if you want a more true drag distance, use pointer down + remaining width
    const toggleBounds = toggle.getBoundingClientRect()
    const pressed = toggle.matches('[aria-pressed=true]')
    const bounds = pressed
      ? toggleBounds.left - this.pointerX
      : toggleBounds.left + toggleBounds.width - this.pointerX
    this.dragBounds = bounds
    toggle.dataset.active = true
  },
  onDrag: function () {
    const pressed = toggle.matches('[aria-pressed=true]')
    // on drag needs to make sure it's also inverted for when already pressed
    const dragged = this.x - this.startX
    const complete = gsap.utils.clamp(
      0,
      100,
      pressed
        ? gsap.utils.mapRange(this.dragBounds, 0, 0, 100, dragged)
        : gsap.utils.mapRange(0, this.dragBounds, 0, 100, dragged)
    )
    this.complete = complete
    gsap.set(toggle, { '--complete': complete })
  },
  onDragEnd: function () {
    gsap.fromTo(
      toggle,
      {
        '--complete': this.complete,
      },
      {
        '--complete': this.complete >= 50 ? 100 : 0,
        duration: 0.15,
        onComplete: () => {
          gsap.delayedCall(0.05, () => {
            toggle.dataset.active = false
            toggle.setAttribute('aria-pressed', this.complete >= 50)
          })
        },
      }
    )
  },
  onPress: function () {
    this.__pressTime = Date.now()
    toggle.dataset.active = true
    // if ('ontouchstart' in window && navigator.maxTouchPoints > 0)
  },
  onRelease: function () {
    this.__releaseTime = Date.now()
    // console.info(this)
      // 'ontouchstart' in window &&
      // navigator.maxTouchPoints > 0 &&
    if (
      ((this.startX !== undefined &&
        this.endX !== undefined &&
        Math.abs(this.endX - this.startX) < 4) ||
        this.endX === undefined)
    )
      toggle.dataset.active = false
    // the interaction becomes a drag if the duration is long enough for the transition
    if (this.__releaseTime - this.__pressTime <= 150) {
      // if it's a click, run a timeline
      toggleState()
    }
  },
})

toggle.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    toggleState()
  }

  if (e.key === ' ') {
    // Prevent scroll
    e.preventDefault()
  }
})

toggle.addEventListener('keyup', (e) => {
  if (e.key === ' ') {
    toggleState()
  }
})

style.css

@import url('https://unpkg.com/normalize.css') layer(normalize);

@layer normalize, base, demo, toggle, debug, transitions;

@layer debug {
  .knockout--debug {
    translate: 0% 200%;
    outline: 4px hotpink dashed;
  }
}

@layer transitions {
  :root {
    --transition: 0.2s;
    --ease: ease-out;
  }
  [data-bounce='true']:has(button:active,[data-active=true]) {
    --transition: 0.6s;
    --ease: linear(
      0 0%,
      0.6091 3.69%,
      1.0259 7.24%,
      1.1733 9.05%,
      1.283 10.92%,
      1.3562 12.87%,
      1.3948 14.95%,
      1.4014 16.03%,
      1.3999 17.16%,
      1.3731 19.64%,
      1.3202 22.27%,
      1.1394 29.39%,
      1.0582 33.17%,
      0.9943 37.45%,
      0.9734 39.64%,
      0.9593 41.92%,
      0.9505 45.08%,
      0.9517 48.7%,
      0.9924 63.02%,
      1.0046 71.2%,
      1.0061 78.24%,
      1 100%
    );
  }
  .indicator--masked .mask {
    translate: calc(
        (var(--complete) / 100) * (100cqi - 60cqi - (0 * var(--border)))
      ) -50%;
    /* transition-property: scale; */
    /* this would work with scale if not for Safari getting funny about the mask */
    transition-property: height, width, margin, scale;
    transition-duration: var(--transition);
    transition-timing-function: var(--ease);
    will-change: height, width, margin;
  }
  .wrapper {
    clip-path: inset(0 0 0 0 round 100px);
    filter: blur(6px);
    transition: filter var(--transition) var(--ease);
  }
  [aria-pressed='true']:not([data-active='true']) .liquid__track {
    left: calc(var(--border) * 6);
  }
  .liquid__track {
    left: 0;
    transition-property: height, width, filter, left;
    transition-duration: var(--transition);
    transition-timing-function: var(--ease);
    translate: calc(
        (var(--complete) / 100) * (100cqi - 100% - (6 * var(--border)))
      ) -50%;
  }
  .indicator__liquid {
    translate: calc(
        (var(--complete) / 100) * (100cqi - 100% - (2 * var(--border)))
      ) -50%;
    transition-property: scale;
    transition-duration: var(--transition);
    transition-timing-function: var(--ease);
    /* transform: scale(var(--scale-x, 1), var(--scale-y, 1)); */
  }
  .indicator__liquid :is(.cover, .shadow) {
    transition: opacity var(--transition) var(--ease);
  }
  /* these are the actual changes when we scale up */
  /* these should also with a [data-active=true] when [data-debug=true] */
  [data-active='true'] .indicator--masked .mask,
  .liquid-toggle:active .indicator--masked .mask {
    height: calc((100% - (2 * var(--border))) * 1.65);
    width: calc((60% - (2 * var(--border))) * 1.65);
    margin-left: calc((60% - (2 * var(--border))) * -0.325);
    /* we can't use scale because of Safari flashing the mask color on change... */
    /* scale: 1.65; */
  }
  [data-active='true'] .indicator__liquid,
  .liquid-toggle:active .indicator__liquid {
    scale: 1.65;
  }

  [data-active='true'] .wrapper,
  .liquid-toggle:active .wrapper {
    filter: blur(0px);
  }

  [data-active='true'] .indicator__liquid .shadow,
  .liquid-toggle:active .indicator__liquid .shadow {
    opacity: 1;
  }

  [data-active='true'] .indicator__liquid .cover,
  .liquid-toggle:active .indicator__liquid .cover {
    opacity: 0;
  }

  [data-active='true'] .indicator__liquid .liquid__track,
  .liquid-toggle:active .indicator__liquid .liquid__track {
    left: calc(var(--border) * 3);
    height: calc((var(--height) * 1px) - (6 * var(--border)));
  }
}

@layer toggle {
  /* this is the button */
  .liquid-toggle {
    --unchecked: hsl(218, 8%, 81%);
    /* --checked: hsl(144, 100%, 43%); */
    --checked: hsl(
      144,
      calc((8 + (var(--complete) / 100 * (92))) * 1%),
      calc((81 - (var(--complete) / 100 * (81 - 43))) * 1%)
    );

    --control: hsl(300, 100%, 100%);
    --border: 5px;
    --width: 140;
    --height: 60;
    height: calc(var(--height) * 1px);
    width: calc(var(--width) * 1px);
    border-radius: 100px;
    border: 0;
    padding: 0;
    cursor: pointer;
    position: relative;
    overflow: visible;
    container-type: inline-size;
    background: #0000;
    transition: outline var(--transition) var(--ease);
    outline-offset: 2px;
  }

  .liquid-toggle:focus-visible {
    outline: 4px solid color-mix(in oklch, var(--checked), #0000);
  }

  .liquid-toggle:active {
    outline: none;
  }
  .liquid-toggle[data-active='true']:focus-visible {
    outline: 4px solid #0000;
  }

  .indicator {
    border-radius: 100px;
    pointer-events: none;
    height: 100%;
    width: 100%;
    background: var(--checked);
    /* outline: 2px dashed canvasText; */
    position: absolute;
    top: 50%;
    scale: 1;
    left: 50%;
    translate: -50% -50%;
  }

  .knockout {
    height: calc(var(--height) * 1px);
    width: calc(var(--width) * 1px);
    border-radius: 100px;
    filter: url(#remove-black);
    position: absolute;
    inset: 0;
    will-change: filter, scale;
    transform: translate3d(0, 0, 0);
  }
  .indicator--masked {
    background: var(--checked);
    z-index: 12;
    height: 100%;
    width: 100%;
    translate: -50% -50%;
    container-type: inline-size;

    .mask {
      position: absolute;
      height: calc(100% - (2 * var(--border)));
      width: calc(60% - (2 * var(--border)));
      top: 50%;
      background: #000;
      left: var(--border);
      border-radius: 100px;
    }
  }

  .wrapper {
    position: absolute;
    inset: 0;
    border-radius: 100px;
  }

  .liquids {
    position: absolute;
    inset: 0;
    transform: translate3d(0, 0, 0);
    border-radius: 100px;
    overflow: hidden;
    filter: url(#goo);

    .liquid__shadow {
      position: absolute;
      inset: 0;
      box-shadow: inset 0px 0px 3px 4px var(--checked),
        inset calc(((var(--complete) / 100) * 8px) + -4px) 0px 3px 4px
          var(--checked);
      border-radius: 100px;
    }

    .liquid__track {
      content: '';
      height: calc((var(--height) * 1px) - (0 * var(--border)));
      width: calc((var(--width) * 1px) - (0 * var(--border)));
      background: var(--checked);
      border-radius: 100px;
      position: absolute;
      top: 50%;
    }
  }

  .indicator__liquid {
    position: absolute;
    height: calc(100% - (2 * var(--border)));
    width: calc(60% - (2 * var(--border)));
    container-type: inline-size;
    top: 50%;
    /* only apply a background if you don't want to see underneath */
    background: #0000;
    left: var(--border);
    border-radius: 100px;

    .shadow {
      opacity: 0;
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 100px;
      box-shadow: 1px -1px 2px hsl(0 0% 100% / 0.5) inset,
        0px -1px 2px hsl(0 0% 100% / 0.5) inset,
        -1px -1px 2px hsl(0 0% 100% / 0.5) inset,
        1px 1px 2px hsl(0 0% 30% / 0.5) inset,
        -8px 4px 10px -6px hsl(0 0% 30% / 0.25) inset,
        -1px 1px 6px hsl(0 0% 30% / 0.25) inset,
        -1px -1px 8px hsl(0 0% 60% / 0.15), 1px 1px 2px hsl(0 0% 30% / 0.15),
        2px 2px 6px hsl(0 0% 30% / 0.15),
        -2px -1px 2px hsl(0 0% 100% / 0.25) inset,
        3px 6px 16px -6px hsl(0 0% 30% / 0.5);
      z-index: 20;
    }

    .cover {
      content: '';
      position: absolute;
      inset: 0;
      background: white;
      border-radius: 100px;
    }
  }
}

@layer base {
  :root {
    --font-size-min: 16;
    --font-size-max: 20;
    --font-ratio-min: 1.2;
    --font-ratio-max: 1.33;
    --font-width-min: 375;
    --font-width-max: 1500;
  }

  html {
    color-scheme: light dark;
  }

  [data-theme='light'] {
    color-scheme: light only;
  }

  [data-theme='dark'] {
    color-scheme: dark only;
  }

  :where(.fluid) {
    --fluid-min: calc(
      var(--font-size-min) * pow(var(--font-ratio-min), var(--font-level, 0))
    );
    --fluid-max: calc(
      var(--font-size-max) * pow(var(--font-ratio-max), var(--font-level, 0))
    );
    --fluid-preferred: calc(
      (var(--fluid-max) - var(--fluid-min)) /
        (var(--font-width-max) - var(--font-width-min))
    );
    --fluid-type: clamp(
      (var(--fluid-min) / 16) * 1rem,
      ((var(--fluid-min) / 16) * 1rem) -
        (((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) +
        (var(--fluid-preferred) * var(--variable-unit, 100vi)),
      (var(--fluid-max) / 16) * 1rem
    );
    font-size: var(--fluid-type);
  }

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

  body {
    background: light-dark(#fff, #000);
    display: grid;
    place-items: center;
    min-height: 100vh;
    font-family: 'SF Pro Text', 'SF Pro Icons', 'AOS Icons', 'Helvetica Neue',
      Helvetica, Arial, sans-serif, system-ui;
  }

  body::before {
    --size: 45px;
    --line: color-mix(in hsl, canvasText, transparent 80%);
    content: '';
    height: 100vh;
    width: 100vw;
    position: fixed;
    background: linear-gradient(
          90deg,
          var(--line) 1px,
          transparent 1px var(--size)
        )
        calc(var(--size) * 0.36) 50% / var(--size) var(--size),
      linear-gradient(var(--line) 1px, transparent 1px var(--size)) 0%
        calc(var(--size) * 0.32) / var(--size) var(--size);
    mask: linear-gradient(-20deg, transparent 60%, white);
    top: 0;
    transform-style: flat;
    pointer-events: none;
    z-index: -1;
  }

  .bear-link {
    color: canvasText;
    position: fixed;
    top: 1rem;
    left: 1rem;
    width: 48px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    opacity: 0.8;
  }

  :where(.x-link, .bear-link):is(:hover, :focus-visible) {
    opacity: 1;
  }

  .bear-link svg {
    width: 75%;
  }

  /* Utilities */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}

div.tp-dfwv {
  width: 280px;
}