Chrome developer Jake Archibald and a guest dive into advanced web development topics, from shiny new features, to hidden details in the platform. Subscribe to Google Chrome Developers→ https://goo.gle/ChromeDevs
Curated by: Chrome for Developers (140 videos)
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