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

Опубликовано 3 мая 2024, 16:00

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-animatio...

Watch more Unleash the Power of Scroll-Driven Animations → goo.gle/SDA
Subscribe to Chrome for Developers → goo.gle/ChromeDevs


#CSS #ScrollDrivenAnimations #Animation #Chrome