Scroll-Linked Animations with ScrollTimeline and ViewTimeline | HTTP 203

Опубликовано 25 октября 2022, 15:54

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

Collection with all CSS Demos → goo.gle/3F9ScqF
Collection with all JS+WAAPI Demos → goo.gle/3F9ScXH

Scroll-Linked Animations Specification → goo.gle/3F9SduJ
Scroll-Linked Animations Polyfill → goo.gle/3SyziN8
CSS WG Issue “Bring back Scroll-Offsets”→ goo.gle/3SxfE4d
document.timeline → goo.gle/3SwNF4u

More videos in the HTTP 203 series → goo.gle/HTTP203
Subscribe to Google Chrome Developers here → goo.gle/ChromeDevs

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

#HTTP203 #ChromeDeveloper #WebDev