Trigger animation immediately with Flackr's Scroll Timeline Polyfill

document.addEventListener("DOMContentLoaded", init);

function init() {
  console.log("loaded");
  const scrolledTitle = document.querySelector(".introduction h1");

  const scrolledTitleTimeline = new ScrollTimeline({
    scrollOffsets: [CSS.percent(50), CSS.percent(100)],
  });

  const keyFrames = [{ width: "100%" }, { width: "1ch" }];

  scrolledTitle.animate(keyFrames, {
    duration: 0.5,
    timeline: scrolledTitleTimeline,
  });
}

document.addEventListener("DOMContentLoaded", init);

function init() {
  console.log("loaded");
  const scrolledTitle = document.querySelector(".introduction h1");

  const scrolledTitleTimeline = new ScrollTimeline({
    scrollOffsets: [CSS.percent(50), CSS.percent(100)],
  });

  const keyFrames = [{ width: "100%" }, { width: "1ch" }];

  scrolledTitle.animate(keyFrames, {
    duration: 0.5,
    timeline: scrolledTitleTimeline,
  });
}