PHPnews.io

Scroll-Linked Animations With the Web Animations API (WAAPI) and ScrollTimeline

Written by Bram.us / Original link on Nov. 24, 2021

scroll-linked-animations-waapi.jpg

Just before I left on holiday, the 2nd article I wrote for CSS-Tricks got published. In it, I take a look at the JavaScript side of the Scroll-Linked Animations specification.

With WAAPI + ScrollTimeline, a typical “progressbar as you scroll” can be coded like this:

const myScrollTimeline = new ScrollTimeline({
  source: document.scrollingElement,
  orientation: 'block',
  scrollOffsets: [
    new CSSUnitValue(0, 'percent'),
    new CSSUnitValue(100, 'percent'),
  ],
});

document.querySelector("#progress").animate(
  {
    transform: ["scaleX(0)", "scaleX(1)"]
  },
  { 
    duration: 1, 
    fill: "forwards", 
    timeline: myScrollTimeline
  }
);

Find the details in the article.

Scroll-Linked Animations With the Web Animations API (WAAPI) and ScrollTimeline →

I like to consider this article the fourth installment in a series on Scroll-Linked Animations that I wrote:

bram link tutorialzine bram bram bram

« Symfony 4.4.35 released - A Guide To Modern CSS Colors With RGB, HSL, HWB, LAB And LCH »