<div id="overlay">

</div>

<button id="toggle">
  Toggle Transition
</button>

@property --start {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --end {
  syntax: "<length>";
  inherits: false;
  initial-value: 100px;
}
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 45deg;
}

#overlay {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;

  background: repeating-linear-gradient(
    var(--angle, 45deg),
    var(--color, black),
    var(--color, black) var(--start),
    transparent var(--start),
    transparent var(--end)
  );

  &.woosh {
    @media screen and (prefers-reduced-motion: no-preference) {
      animation: woosh var(--speed, 2s);
    }
  }
}

@keyframes woosh {
  50%,
  75% {
    --start: var(--end);
  }
  100% {
    --start: 0px;
  }
}

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;

  &.has-background {
    background-color: red;
    background-image: url('data:image/svg+xml,%3Csvg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="white" fill-rule="evenodd"/%3E%3C/svg%3E');
  }
}

#toggle {
  background: black;
  color: white;
  padding: 1rem 2rem;
  font: 150% system-ui;
  border-radius: 100px;
  border: 0;
}

import Knobs from "https://cdn.skypack.dev/@yaireo/knobs";

let ANIMATION_LENGTH = 2000;

toggle.onclick = () => {
  overlay.classList.add("woosh");

  setTimeout(() => {
    document.body.classList.toggle("has-background");
  }, ANIMATION_LENGTH / 2);
};
overlay.onanimationend = () => {
  overlay.classList.remove("woosh");
};

var settings = {
  knobsToggle: true,
  visible: 0,
  CSSVarTarget: document.querySelector("#overlay"),

  knobs: [
    {
      cssVar: ["speed", "s"],
      label: "Speed",
      type: "range",
      value: 2,
      min: 0.1,
      max: 5,
      step: 0.1,
      onChange: (e, speedData) => {
        ANIMATION_LENGTH = speedData.value * 1000;
      }
    },
    {
      cssVar: ["color"],
      label: "Color",
      type: "color",
      value: "#f06d06",
      swatches: ["red", "gold"]
    },
    {
      cssVar: ["end", "px"],
      label: "Width",
      type: "range",
      value: 100,
      min: 20,
      max: 300,
      step: 5
    },
    ,
    {
      cssVar: ["angle", "deg"],
      label: "Angle",
      type: "range",
      value: 45,
      min: 0,
      max: 90,
      step: 1
    }
  ]
};

var myKnobs = new Knobs(settings);
myKnobs.render();