// Bounce easing function
const bounce = function (pos) {
  const n1 = 7.5625;
  const d1 = 2.75;

  if (pos < 1 / d1) {
    return n1 * pos * pos;
  } else if (pos < 2 / d1) {
    return n1 * (pos -= 1.5 / d1) * pos + 0.75;
  } else if (pos < 2.5 / d1) {
    return n1 * (pos -= 2.25 / d1) * pos + 0.9375;
  } else {
    return n1 * (pos -= 2.625 / d1) * pos + 0.984375;
  }
};

// Elastic easing function
const elastic = function (x) {
  if (x === 0 || x === 1) return x;
  const c4 = (2 * Math.PI) / 3;
  return Math.pow(2, -10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1;
};

// Need more easings? Go check out https://easings.net/

// Config
const waapi_precision = 100;
const linear_precision = 25;
const easing = bounce;

// Build keyframes using custom easing function
const values = [...Array(waapi_precision).keys()].map((i) =>
  easing(i / waapi_precision)
);
const keyframes = values.map((value) => ({ translate: `0% ${value * 200}%` }));

// Set CSS animation to use this custom easing too
const toLinear = (fn, points = 50) => {
  // Source: https://developer.mozilla.org/en-US/blog/custom-easing-in-css-with-linear/#recreating_popular_eases_with_javascript
  const result = [...new Array(points)]
    .map((d, i) => {
      const x = i * (1 / points);
      return fn(x);
    })
    .join(",");
  return `linear(${result})`;
};
document.documentElement.style.setProperty(
  "--custom-easing",
  toLinear(easing, linear_precision)
);

// Animate element via JS
const anim = document
  .querySelector('.bounce[data-method="js"]')
  .animate(keyframes, {
    duration: 2000,
    easing: "linear",
    fill: "both",
    iterations: Infinity
  });

// Sync up JS animation to CSS version that’s already playing
setTimeout(() => {
  anim.startTime = document
    .querySelector('.bounce[data-method="css"]')
    .getAnimations()[0].startTime;
}, 100);