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