Kevin Powell - Community•12mo ago

Trigger animation immediately with Flackr's Scroll Timeline Polyfill

Hi! I am trying to create an animation of text shrinking to 1 character. But the animation only get triggered when the text element reaches the top (0% in CSS). I want the text to shrink immediately when I start scrolling. The JavaScript looks like this:

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,
  });
}

1 Reply

NeilVanGotham•12mo ago

I got it! I have to use the new "ViewTimeline" instead of "ScrollTimeline"

Gaming

Programming

Trigger animation immediately with Flackr's Scroll Timeline Polyfill