Nice transitions using Turbo

turbo_transitions.js

document.addEventListener("turbo:visit", () => {
  let main = document.querySelector("main");
  if (main.dataset.turboTransition == "false") return;

  let [movement, scale] = ["-12px", "0.99"];

  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
    [movement, scale] = ["-6px", "1"]
  };

  main.style.transformOrigin = "0% 0%";
  main.dataset.animatingOut = true;

  main.animate(
    [
      { opacity: 1, transform: "translateX(0px) scale(1)" },
      { opacity: 0, transform: `translateX(${movement}) scale(${scale})` }
    ],
    { duration: 200, easing: "cubic-bezier(0.45, 0, 0.55, 1)", fill: "forwards" }
  );

  Promise.all(main.getAnimations().map(animation => animation.finished)).then(() => {
    if (main.dataset.animatingOut) main.style.visibility = "hidden"
  })
});

document.addEventListener("turbo:load", () => {
  let main = document.querySelector("main");
  if (main.dataset.turboTransition == "false") return;
  if (window.bypassTurboTransition) {
    window.bypassTurboTransition = false
    return
  }

  let [movement, scale] = ["-10px", "0.99"];

  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
    [movement, scale] = ["-5px", "1"]
  };

  main.style.visibility = "visible";
  main.style.transformOrigin = "0% 0%";
  delete main.dataset.animatingOut;

  main.animate(
    [
      { opacity: 0, transform: `translateX(${movement}) scale(${scale})` },
      { opacity: 1, transform: "translateX(0px) scale(1)" }
    ],
    { duration: 200, easing: "cubic-bezier(0.45, 0, 0.55, 1)" }
  )
})