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; 💀🤘

In this episode Una and Adam catch you up to the latest syntax features of CSS nesting.

Resources: Episode 47 → https://goo.gle/3SvM9T4 Episode 65 → https://goo.gle/3ygA7X1 CSS Nesting Update → https://goo.gle/3WHCRpK 

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 cover the linear() CSS easing function that can create bounce and spring effects.

Resources:

Ep 22 on Animation → https://goo.gle/4frnp8y 

linear() generator → https://goo.gle/46xs2JZ 

Complex animation curves in CSS with linear() → https://goo.gle/4ftm0Oz 

Open Props premade spring and bounce variables → https://goo.gle/46uaGOc 

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 talk about text wrap, a great modern improvement to typography on the web platform. Learn how you can create logical layout rules for your headings and other copy with just one line of code.

Resources: text-wrap on MDN → https://goo.gle/3zvwixd 

soft breaks → https://goo.gle/4cXKLAq 

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 expand on episode 61 about :has() by focusing specifically on use cases, tips and tricks. Get inspired and discover new ways to make reactive UI from CSS.

Resources: Ep 61 → https://goo.gle/4cID6pE 

Piccali → https://goo.gle/4ePKJMG 

Ahmad Shadeed → https://goo.gle/4bsk85F 

The Looper → https://goo.gle/3yKmXkI 

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 provide a color update, covering changes to the specs and new functions. 

Links RCS calc() tool → https://goo.gle/4cRRJHt 

Apple Annie CSS Color Modules and Changes, Part I → https://goo.gle/3xtTr2A 

Lea verou article on RCS for contrast → https://goo.gle/3L3x5YF

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 share practical use cases, syntax and strategies for all the new math functions in CSS. From trig to algebra, they'll help you get a good idea on where and how these fit into your UI toolbelt.

Links Ana Tudor tests your browser for CSS math function support → https://goo.gle/4cmBm5r 

Great guide and overview from Daniel Wilson → https://goo.gle/4enKgBe 

layout pow() → https://goo.gle/3RlvAsI 

Using Absolute Value, Sign, Rounding and Modulo in CSS Today → https://goo.gle/4aY3OJz 

Time based animation → https://goo.gle/3x6Dm2K  

CSS type casting to numeric: tan(atan2()) scalars by Jane Ori → https://goo.gle/4bZyrj2 

Open Props v2 type ramp prototype with pow() as taught by Dan Wilson in their post → https://goo.gle/45uqikj 

CSS physics for transitions and keyframes with these math functions → https://goo.gle/3VltDgX 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; 💀🤘