Core Concepts scroll() and ScrollTimeline Unleash the power of Scroll-Driven Animations (210) (Дата оригинальной публикации:

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) → Demo: Reading Indicator (JS) → Tool: Scroll Timeline Progress Visualization → Tools: scroll() Arguments→ Check out more Scroll-Driven Animations Demos → Watch more Unleash the Power of Scroll-Driven Animations → Subscribe to Chrome for Developers → #CSS #ScrollDrivenAnimations #Animation #Chrome