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