from-[route] class

[scsskid]

Hi, great product, thank you!

I was wondering how to change animation for rendering content depending of previous route like barbas 'from' method/class
there is only to-[route] applied, out of the box

maybe with the api, please point me in the right direction?

I think this would be also a good core featurem having from-[route] classes applied

thanks again

[scsskid]

Update: there is now an official Route Name Plugin that does this automatically.

Previous answer:

I managed to achieve this with events:

It works somehow, but I'm struggling to figure out how and when to change transition timings, especially delays

# use classifyHelper
import { classify } from "swup/lib/helpers";

const docEl = document.documentElement;

swup.on("animationOutDone", () => {
  const routeFrom =
    swup.transition.from !== "/" ? swup.transition.from : "homepage";
  const fromClassName = `from-${classify(routeFrom)}`;
  docEl.classList.add(fromClassName);
});

swup.on("animationInStart", () => {
  const getStartsWithFromClassName = (className) => {
    return className.startsWith("from");
  };
  const fromClass = Array.from(docEl.classList).filter(
    getStartsWithFromClassName
  )[0];

  docEl.classList.remove(fromClass);
});