The Future of CSS: Scroll-Linked Animations with @scroll-timeline (Part 4)
The Future of CSS: Scroll-Linked Animations with @scroll-timeline (Part 4) 관련
::: critical 🚨 UPDATE
The Scroll-Linked Animations Specification and its proposed syntax have undergone a major rewrite. This post details an older version of the syntax and has not been updated to reflect these changes.**
Do note that the concept of a Scroll-Linked Animation still stands, it’s only the syntax that has changed since writing this. Please refer to scroll-driven-animations for an article with examples that use the updated syntax.
:::
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
}
);
Info
Find the details in the article.
I like to consider this article the fourth installment in a series on Scroll-Linked Animations that I wrote:
:::