Core Concepts: scroll() and ScrollTimeline | Unleash the power of Scroll-Driven Animations (2/10)

In this second episode of “Unleash the power of Scroll-Driven Animations” show host Bramus digs into the Scroll Timeline, a new type of animation timeline that tracks a scroller from start to finish.
In CSS you can create this type of timeline with the scroll() function and in JavaScript through the ScrollTimeline class.
When connected to a CSS or WAAPI animation, this type of timeline creates a Scroll-Driven Animation. There’s some options to configure, which all get covered in this episode.
Chapters:
0:00 - Intro
1:27 - Making a scroll-driven reading indicator
3:04 - The scroll() function in detail
5:20 - The ScrollTimeline class
5:59 - Recap
Resources:
Demo: Reading Indicator (CSS) → goo.gle/4dhjASo
Demo: Reading Indicator (JS) → goo.gle/3QkGluA
Tool: Scroll Timeline Progress Visualization → goo.gle/3y1YLtH
Tools: scroll() Arguments→ goo.gle/4aPmbBh
Check out more Scroll-Driven Animations Demos → goo.gle/scroll-driven-animati...
Watch more Unleash the Power of Scroll-Driven Animations → goo.gle/SDA
Subscribe to Chrome for Developers → goo.gle/ChromeDevs
#CSS #ScrollDrivenAnimations #Animation #Chrome

[@namvu512]

So you can only choose nearest, self and root. Can you track scroll of another element using id?

[@perioad]

Could you please explain why scrolling ancestor is html and not body?

[@MauricioAndrian]

, by default, is a block element whose height depends on its content. On the other hand, is the first element of the document and the one that gets the scroller automatically when the is taller than the viewport. But as it was said in the video, the scroller could be attached to the body if: 1. `body { max-height: 100vh; overflow: scroll; }` and 2. Contents of the body occupies more than 100vh.