The Future of CSS: Scroll-Linked Animations with @scroll-timeline (Part 4)

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'),

    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 →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.