Una and Adam recap the season! They share their favorite features, stories, and use cases. Season 5 covered popovers, dialogs, top layers, trig functions, color functions, :has() tricks, balanced text wrapping, linear() easing, nesting, anchoring, state queries, view transitions, and scroll driven animation. What a year for CSS!

Una Kravets (co-host)
Twitter | Instagram | YouTube
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬

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