Skip to content

Tiny polyfill for CSS scroll driven animations

x.com

let animationRange = [0, 62];

if (!CSS.supports("(animation-timeline: scroll())")) {
  let [start, end] = animationRange;
  let animations = header.getAnimations();
  let onScroll = () => {
    // Calculate animation time based on percentage of animationRange * duration.
    let time =
      Math.max(0, Math.min(end, window.scrollY - start) / (end - start)) * 1000;
    for (let animation of animations) {
      animation.currentTime = time;
    }
  };

  window.addEventListener("scroll", onScroll, { passive: true });
}