[Video](https://www.youtube.com/watch?v=Qf5wdXOxW3E)

Bramus shares his excitement for Scroll-Linked Animations that are powered by nothing but HTML and CSS. JavaScript option that integrates with WAAPI also included!

Chapters:

- 00:00 - Prologue
- 00:15 - Intro + Teaser Example
- 03:41 - Scroll-Linked vs. Scroll-Triggered Animations
- 05:18 - Basic Example using CSS (Document Timeline, Scroll Progress Timeline, scroll(), animation-timeline)
- 12:31 - Basic Example using JavaScript (ScrollTimeline)
- 14:06 - Named Scroll Progress Timelines (scroll-timeline-name, scroll-timeline-axis)
- 20:31 - Scroll Progress Timelines Offsets
- 25:05 - Tracking Elements as they enter/exit using JavaScript (ViewTimeline)
- 31:09 - Tracking Elements as they enter/exit using CSS (view-timeline-name, view-timeline-axis)
- 32:02 - View Progress Timeline Insets
- 33:07 - View Progress Timeline Examples (Cover Flow, Contact List Fly-in/Fly-Out, Stacking Cards)
- 35:40 - Play with it today!
- 38:04 - Epilogue

Resources:

- Cover Flow Demo (CSS) → <https://goo.gle/3SvEQbd>
- Cover Flow Demo (JS+WAAPI) → <https://goo.gle/3F9S62h>
- Scroll Progress Demo (CSS) → <https://goo.gle/3F9S6zj>
- Scroll Progress Demo (JS+WAAPI) → <https://goo.gle/3Sq5nXn>
- Image Reveal on Enter Demo (CSS) → <https://goo.gle/3F9S8XX>
- Image Reveal on Enter Demo (JS+WAAPI) → <https://goo.gle/3Sto8JK>
- List fly-in + fly-out Effect Demo (CSS) →<https://goo.gle/3Svg3UE>
- List fly-in + fly-out Effect Demo (JS+WAAPI) → <https://goo.gle/3F9Saix>
- Horizontal Scroll Section Demo (CSS) → <https://goo.gle/3SpaDe5>
- Horizontal Scroll Section Demo (JS+WAAPI) → <https://goo.gle/3SAbcBz>
- Parallax Cover to Sticky Header, faked (JS+WAAPI) → <https://goo.gle/3SKoMCR>
- Stacking Cards Demo (JS+WAAPI) → <https://goo.gle/3VW0wjD>

- Collection with all CSS Demos → <https://goo.gle/3F9ScqF>

- Collection with all JS+WAAPI Demos → <https://goo.gle/3F9ScXH>

- Scroll-Linked Animations Specification → <https://goo.gle/3F9SduJ>

- Scroll-Linked Animations Polyfill → <https://goo.gle/3SyziN8>

- CSS WG Issue "Bring back Scroll-Offsets"→ <https://goo.gle/3SxfE4d>

- document.timeline → <https://goo.gle/3SwNF4u>

More videos in the HTTP 203 series → <http://goo.gle/HTTP203>

Subscribe to Google Chrome Developers here → <https://goo.gle/ChromeDevs>

Also, if you enjoyed this, you might like the HTTP203 podcast → <https://goo.gle/HTTP203Podcast>

[Back to all episodes](https://web.dev/shows/)