The CSS Podcast

In this episode our esteemed guest returns! This time to help us grok Scroll Driven Animation. Learn all about scroll(), view(), animation-timeline, timeline-scope, animation-range, and more. Power those animations with off-the-main-thread CSS scroll animation powers.   Resources: Bramus's Demos: All mentioned Demos + Tools + Video Course + DevTools Extension link → https://goo.gle/3Uw31up  Video Course direct link: https://goo.gle/learn-scroll-driven-animations   Adam's Demos: scroll() the hue wheel → https://goo.gle/4emb3NO  CSS scroll() feature time warp → https://goo.gle/4exH3yv  view() long bento list → https://goo.gle/4gtcCLx  view() scrolly telling → https://goo.gle/3TAq2vA  view() iOS-like app switcher → https://goo.gle/4etvCI6  view() variable font animation → https://goo.gle/4e8eJmd    Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬  Adam Argyle (co-host) Twitter | Instagram | YouTube @GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘

In this episode Una and Adam bring on an esteemed guest Bramus, who brings us deep knowledge on View Transitions. These are easy to get started with but difficult to master, but not with Bramus here to teach us. He'll be covering introductory to advanced API features and a big bag of examples and demos.  Resources: Developer Documentation → https://goo.gle/4aHY7zo  Quick intro to View Transitions (Google I/O 2023 video) → https://goo.gle/3ZieRLp  What's new in View Transitions? (Google I/O 2024 video) → https://goo.gle/3zeYNj3  Misconceptions about View Transitions → https://goo.gle/3Tpsu7O  Bramus's Demos: Collection of various demos, both SPA and MPA → https://goo.gle/3B4edY8  Accordion → https://goo.gle/3B4egDi     Adam's Demos: Grid gallery → https://goo.gle/4giz0XV  Always great grid → https://goo.gle/3MH68Lu  Flexbox visualizer → https://goo.gle/47kmJOB  Editable tabs → https://goo.gle/4ghNfMx  Dollar number input → https://goo.gle/4e0FsBf  Stateful morphing button → https://goo.gle/4ebBNR2  Drag and Drop → https://goo.gle/3XlP2Yn  Isotope recreation → https://goo.gle/4dVX5lN  Local development animated → https://goo.gle/3XHjm17    Una Kravets (co-host) Twitter → https://goo.gle/452aBRb YouTube → https://goo.gle/457oMnS Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face Host of Tools Today → https://goo.gle/4aI6JpC & Designing in the Browser 🎬  → https://goo.gle/4e4YTcM    Adam Argyle (co-host) Twitter → https://goo.gle/3yFnHYu Instagram → https://goo.gle/3wUb6QJ YouTube → https://goo.gle/4dZNKK7 @GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘 CSSWG → https://goo.gle/4bFErxq VisBug → https://goo.gle/4bDcVQZ     The CSS Podcast  #CSSpodcast  

In this episode, Una and Adam discuss a future web capability that builds on container queries: state queries. From CSS, this feature will be able to detect  if a container is overflowing, when an element is scroll snapped, and when an element is stuck from position: sticky. Resources: :stuck, :snapped, :on-screen, etc → https://goo.gle/3WVhSi6   state queries syntax → https://goo.gle/3T2gI33  explainer → https://goo.gle/3XevW7x  Intent To Prototype → https://goo.gle/3Au8rOY  Scroll Snap Events → https://goo.gle/47koXO1     Una Kravets (co-host) Twitter → https://goo.gle/452aBRb YouTube → https://goo.gle/457oMnS  Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face Host of Tools Today → https://goo.gle/4aI6JpC & Designing in the Browser 🎬  → https://goo.gle/4e4YTcM  Adam Argyle (co-host) Twitter → https://goo.gle/3yFnHYu Instagram → https://goo.gle/3wUb6QJ YouTube → https://goo.gle/4dZNKK7  @GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘 CSSWG → https://goo.gle/4bFErxq VisBug → https://goo.gle/4bDcVQZ       The CSS Podcast #CSSpodcast   Watch more The CSS Podcast → https://goo.gle/CSSpodcast  Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs  #CSSPodcast #ChromeForDevelopers #Chrome   Speaker: Una Kravets, Adam Argyle

In this episode Una and Adam explain anchor positioning and all its amazing features. Resources: Introducing the CSS anchor positioning API → https://goo.gle/3SWrvM5  CSS anchor positioning → https://goo.gle/4dwgmd9  Tab’s talk from CSS Day → https://goo.gle/4ds8g5B  Una's Anchor Tool → https://goo.gle/3yDYDSd  Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬  Adam Argyle (co-host) Twitter | Instagram | YouTube@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘