🎥 Core Concepts: Timeline Lookup and Named TLs | Unleash the power of Scroll-Driven Animations (5/10)

Author: Chrome for Developers - Bewertung: 0x - Views:1

In this fifth episode of “Unleash the power of Scroll-Driven Animations” show host Bramus shows how to the timeline lookup mechanism works, where it can fail to work properly, and how to work around that by using named timelines or simply swapping out an `overflow: hidden` with an `overflow: clip`. Chapters: 0:00 - Intro 0:51 - The timeline lookup mechanism 3:00 - Intermezzo: Use `overflow: clip` instead of `overflow: hidden` 3:50 - Using a named timeline 5:17 - Sharing a single named timeline with multiple animations 6:49 - Intermezzo: View Timelines rely on the “untransformed principal box” 7:25 - Using timeline-scope to attach to non-ancestor scrollers 8:49 - Outro Resources: Demo: `overflow: hidden;` vs `overflow: clip;` → https://goo.gle/4dhrydU Article: `overflow: hidden;` vs `overflow: clip;` → https://goo.gle/overflow-clip-vs-hidden Demo: Carousel Step Indicator (CSS) → https://goo.gle/3QmG76a Demo: Cover Flow (CSS) → https://goo.gle/4aQzYr3 Demo: Cover Flow (JS) → https://goo.gle/3UbfYse Demo: Carousel Markers with timeline-scope (CSS) → https://goo.gle/4dbV4ln Check out more Scroll-Driven Animations Demos → https://goo.gle/scroll-driven-animations-demos Watch more Unleash the Power of Scroll-Driven Animations → https://goo.gle/SDA Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs #CSS #ScrollDrivenAnimations #Animation #chrome Speaker: Bramus Van Damme