KPC
Kevin Powell - Community•2y ago
NeilVanGotham

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
NeilVanGothamOP•2y ago
I got it! I have to use the new "ViewTimeline" instead of "ScrollTimeline"

Did you find this page helpful?