HTTP 203
Scroll-Linked Animations with ScrollTimeline and ViewTimeline

Scroll-Linked Animations with ScrollTimeline and ViewTimeline

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

#HTTP203 #ChromeDeveloper #WebDev

  1. Scroll-Linked Animations with ScrollTimeline and ViewTimeline

  2. How rotate(0) fixed my transform animation

  3. A love letter to DOMPoint and DOMMatrix

  4. It's viewports all the way down

  5. Magic tricks with the HTML parser

  6. DOM ready events considered harmful

  7. Demystifyingish SVG paths

  8. FLIP animations

  9. The history API is dead. Long live the navigation API

  10. Samsung Internet - the why & how

  11. Is .css a bad idea? Is inlining the way forward?

  12. What key was pressed? (You won't believe how keyboard events work)

  13. Building VR and AR experiences using HTML

  14. Cross-fading DOM elements

  15. Generating your color palette in CSS

  16. The Zombie DOM - old DOM stuff that still haunts us today

  17. Bringing bounce and elastic easing to CSS

  18. Yes, we use a Joy-Con to change slides. Here's how…

  19. Are SPAs better than MPAs?

  20. Avoiding layout shift by putting the CSS in charge

  21. Color Spaces: Do YOU know the difference between sRGB, LAB and CIE XYZ?

  22. Random paint effects

  23. Deno

  24. Debugging memory leaks

  25. Season 8 trailer

  26. Top 10 performance pitfalls

  27. From nothin’ to gzip

  28. Progressively loading images

  29. Conducting tech interviews

  30. AssemblyScript

  31. The big back button quiz

  32. Writing Good Alt Text

  33. Scheduling Tasks

  34. JavaScript counters the hard way

  35. Dithering

  36. Importing JSON - ABANDONED

  37. Web animation gotchas

  38. WebAssembly Threads

  39. Slashing layout cost with content-visibility

  40. 3.143 ways to synchronize data across documents

  41. Weak JavaScript

  42. Streaming requests with fetch

  43. Socially Distant HTTP 203

  44. Cross-origin fetches

  45. Surma’s Interop Adventure

  46. Humans can't read URLs. How can we fix it?

  47. Is reduce() bad?

  48. The best web feature of 2019: Part 4/4

  49. The best web feature of 2019: Part 3/4

  50. The best web feature of 2019: Part 2/4

  51. The best web feature of 2019: Part 1/4

  52. WebAssembly Interface Types

  53. Import maps

  54. Push Notifications

  55. Is postMessage slow?

  56. Scope in JavaScript

  57. Handling updates offline-first

  58. Four silly browser hacks

  59. How we got into web development

  60. Changing web standards

  61. Solving Clickjacking

  62. But… why HTTP 203?

  63. Loop Tiling

  64. Share Target

  65. Context and Optimizations

  66. JAM Stack

  67. New Canvas Stuff

  68. Background Fetch

  69. Best web features of 2018: The Final!

  70. Best web features of 2018: Part 3/4

  71. Best web features of 2018: Part 2/4

  72. Best web features of 2018: Part 1/4

  73. Old vs New JavaScript

  74. Page Lifecycle API

  75. SVG Transform Box

  76. JavaScript proposals

  77. Polyfills

  78. Broadcast channel

  79. CORB

  80. JavaScript for-loops are… complicated

  81. Lighthouse and Puppeteer

  82. What's new in JavaScript

  83. Google's Crawler & JavaScript

  84. Web Security

  85. What's New in Chrome DevTools

  86. Technical Debt

  87. Google Chrome Origins

  88. Web Dev Beginnings with Mariko Kosaka

  89. Accessibility with Rob Dodson

  90. PWA Starter Kit with Monica Dinculescu

  91. State of the Web with Ben Galbraith & Dion Almaer

  92. #SmooshGate

  93. Work Life Balance

  94. Class-based Tree Shaking

  95. Resize Observer

  96. JavaScript Symbols

  97. Webpack and Workers

  98. 120fps

  99. EventTarget

  100. Import()

  101. WebWorkers

  102. Transform Streams

  103. Dynamic Import()

  104. FetchObserver

  105. Async Iterators & Generators

  106. FlatMap & Flatten

  107. Template Instantiation

  108. Weightless CSS

  109. Web Architecture

  110. Animation Worklet

  111. Web Locks API

  112. WeakMaps

  113. Web RTC

  114. VDOM vs lit-html

  115. Visual Viewport

  116. Imposter Syndrome

  117. Web Standards & Flash

  118. HTTP203 Recap

  119. HTTP2

  120. Libraries vs Frameworks

  121. Jake Beats Wikipedia

  122. Paul Built A Web App

  123. Season 3 Trailer

  124. The Future of JavaScript

  125. Maintainable Code

  126. Browser Monoculture

  127. Utopia Vs Dystopia

  128. Performance Matters

  129. Progressive Loading

  130. CSS Triggers

  131. Web Vs Native

  132. Build tools

  133. HTTPS Everywhere

  134. Font Rendering

  135. Pointer Events

  136. Gotchas

  137. Frame Timing

  138. Christmas Special

  139. Season 2 Teaser