main#home-page(data-wrapper="", role="main")
  .container
    h2.font-sz-3xl.font-sans.font-400 Easing
    .animation-containers.jumbotron.jumbotron-fluid.my-2.p-4.rounded-lg.box-shadow.text-dark.bg-warning
      .animation-container.css-transform-demo
        h3.font-sz-xl.font-sans.font-400 Custom Easing Functions
        p Click on the box to play the animation
        .contain
          .el-initial
          .el
    .output

html,
body {
  font-family: Manrope, sans-serif;
}

.div {
  @apply bg-blue-400 w-10 h-10 rounded relative m-2;
  --size: 8vmin;
  width: var(--size);
  height: var(--size);
}

.el,
.el-initial {
  --size: 4vmin;
  width: var(--size);
  height: var(--size);
  /*     transform: scale(1); */
  border-radius: 14%;
  margin: 5px;
  background: #616aff;
  position: relative;
}

.el {
  transform: translateX(0) scale(1) rotate(0);
  opacity: 1;
}

.svg {
  margin: auto;
  display: block;
  width: 500px;
  height: 300px;
  max-height: 100vh;
  max-width: 100%;

  & path {
    stroke: #fff2b1;
    stroke-dasharray: 400 400;
    stroke-dashoffset: 0;
  }
}

.el-initial {
  opacity: 0.6;
  position: absolute;
  display: block;
  margin-top: 0;
  top: 0;
}

.animation-container {
  transition: background-color 0.5s ease;
  background-color: rgba(0, 0, 0, 0.085);
  border-radius: 5px;
  padding: 5px;
  cursor: pointer;

  &:hover {
    background-color: rgba(255, 255, 255, 0.25);
  }
}

.contain {
  position: relative;
}

.animation-container + .animation-container {
  margin-top: 2em;
}

input[type="range"] {
  width: 100%;
  padding: 0;
  margin: 0;
}
html:not(.unsupported) .support {
  display: none;
}

import {
  animate,
  CustomEasing,
  SpringEasing,
  ApplyCustomEasing,
  EaseOut,
  Quad
} from "https://cdn.skypack.dev/@okikio/animate@beta";

let containerSel = ".css-transform-demo";
let [translateXPts, duration] = SpringEasing([0, 250], "spring(5, 100, 10, 1)");

let anim = animate({
  target: `${containerSel} .el`,
  translateX: translateXPts,

  rotateZ: CustomEasing(["0turn", 0.25], {
    easing: "spring(5, 100, 10, 1)"
  }),

  ...ApplyCustomEasing({
    outline: ["1px solid red", "3 dashed green"],
    outlineOffset: ["0px", 10],

    easing: "spring(5, 100, 10, 1)"
  }),

  "background-color": CustomEasing(["#616aff", "white"], EaseOut(Quad)),

  easing: "linear",
  fillMode: "both",
  duration,
  direction: "alternate",
  loop: 2
});

let container = document.querySelector(containerSel);
container.addEventListener("click", () => {
  anim.reset();
  anim.play();
});

let outputEl = document.querySelector(".output");
if (outputEl && translateXPts) {
  outputEl.textContent = `[${translateXPts.join(", ")}]`;
}