<description>&lt;p dir="ltr"&gt;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. &lt;/p&gt; &lt;p dir="ltr"&gt;Resources:&lt;br /&gt; Developer Documentation → &lt;a href= "https://goo.gle/4aHY7zo"&gt;https://goo.gle/4aHY7zo&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;Quick intro to View Transitions (Google I/O 2023 video) → &lt;a href= "https://goo.gle/3ZieRLp"&gt;https://goo.gle/3ZieRLp&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;What's new in View Transitions? (Google I/O 2024 video) → &lt;a href= "https://goo.gle/3zeYNj3"&gt;https://goo.gle/3zeYNj3&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;Misconceptions about View Transitions → &lt;a href= "https://goo.gle/3Tpsu7O"&gt;https://goo.gle/3Tpsu7O&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;&lt;br /&gt; Bramus's Demos:&lt;br /&gt; Collection of various demos, both SPA and MPA → &lt;a href= "https://goo.gle/3B4edY8"&gt;https://goo.gle/3B4edY8&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;Accordion → &lt;a href= "https://goo.gle/3B4egDi"&gt;https://goo.gle/3B4egDi&lt;/a&gt; &lt;/p&gt; &lt;p&gt;&lt;strong&gt;  &lt;/strong&gt;&lt;/p&gt; &lt;p dir="ltr"&gt;Adam's Demos:&lt;br /&gt; Grid gallery → &lt;a href= "https://goo.gle/4giz0XV"&gt;https://goo.gle/4giz0XV&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;Always great grid → &lt;a href= "https://goo.gle/3MH68Lu"&gt;https://goo.gle/3MH68Lu&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;Flexbox visualizer → &lt;a href= "https://goo.gle/47kmJOB"&gt;https://goo.gle/47kmJOB&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;Editable tabs → &lt;a href= "https://goo.gle/4ghNfMx"&gt;https://goo.gle/4ghNfMx&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;Dollar number input → &lt;a href= "https://goo.gle/4e0FsBf"&gt;https://goo.gle/4e0FsBf&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;Stateful morphing button → &lt;a href= "https://goo.gle/4ebBNR2"&gt;https://goo.gle/4ebBNR2&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;Drag and Drop → &lt;a href= "https://goo.gle/3XlP2Yn"&gt;https://goo.gle/3XlP2Yn&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;Isotope recreation → &lt;a href= "https://goo.gle/4dVX5lN"&gt;https://goo.gle/4dVX5lN&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;Local development animated → &lt;a href= "https://goo.gle/3XHjm17"&gt;https://goo.gle/3XHjm17&lt;/a&gt; &lt;/p&gt; &lt;p&gt;&lt;strong&gt; &lt;/strong&gt;&lt;/p&gt; &lt;p dir="ltr"&gt;Una Kravets (co-host)&lt;br /&gt; &lt;a href="https://twitter.com/Una"&gt;Twitter&lt;/a&gt; → &lt;a href= "https://goo.gle/452aBRb"&gt;https://goo.gle/452aBRb&lt;/a&gt;&lt;br /&gt; &lt;a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"&gt;YouTube&lt;/a&gt; → &lt;a href= "https://goo.gle/457oMnS"&gt;https://goo.gle/457oMnS&lt;/a&gt;&lt;br /&gt; Making the web more colorful ✨🎨  Web DevRel &lt;a href= "https://twitter.com/googlechrome"&gt;@googlechrome&lt;/a&gt; Unicorn face Host of Tools Today → &lt;a href= "https://goo.gle/4aI6JpC"&gt;https://goo.gle/4aI6JpC&lt;/a&gt; &amp; &lt;a href="https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&amp;redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&amp;event=video_description&amp;v=Irp6R69pZGA"&gt; &lt;br /&gt; Designing in the Browser&lt;/a&gt; 🎬  → &lt;a href= "https://goo.gle/4e4YTcM"&gt;https://goo.gle/4e4YTcM&lt;/a&gt; &lt;/p&gt; &lt;p&gt;&lt;strong&gt; &lt;/strong&gt;&lt;/p&gt; &lt;p dir="ltr"&gt;Adam Argyle (co-host)&lt;br /&gt; &lt;a href="https://twitter.com/argyleink"&gt;Twitter&lt;/a&gt; → &lt;a href= "https://goo.gle/3yFnHYu"&gt;https://goo.gle/3yFnHYu&lt;/a&gt;&lt;br /&gt; &lt;a href="https://www.instagram.com/argyleink/"&gt;Instagram&lt;/a&gt; → &lt;a href="https://goo.gle/3wUb6QJ"&gt;https://goo.gle/3wUb6QJ&lt;/a&gt;&lt;br /&gt; &lt;a href="https://a.nerdy.dev/youtube"&gt;YouTube&lt;/a&gt; → &lt;a href= "https://goo.gle/4dZNKK7"&gt;https://goo.gle/4dZNKK7&lt;/a&gt;&lt;br /&gt; &lt;a href="https://twitter.com/GoogleChrome"&gt;@GoogleChrome&lt;/a&gt; CSS DevRel; &lt;a href="https://twitter.com/CSSWG"&gt;@CSSWG&lt;/a&gt;; &lt;a href= "https://a.nerdy.dev/gimme-visbug"&gt;VisBug&lt;/a&gt; maker; punk; CSS/JS/UX addict; 💀🤘&lt;br /&gt; CSSWG → &lt;a href= "https://goo.gle/4bFErxq"&gt;https://goo.gle/4bFErxq&lt;/a&gt;&lt;br /&gt; VisBug → &lt;a href= "https://goo.gle/4bDcVQZ"&gt;https://goo.gle/4bDcVQZ&lt;/a&gt;    &lt;/p&gt; &lt;p dir="ltr"&gt;The CSS Podcast &lt;br /&gt; #CSSpodcast&lt;/p&gt; &lt;p&gt; &lt;/p&gt;</description>

The CSS Podcast

The CSS Podcast

089: View transitions

SEP 19, 202441 MIN
The CSS Podcast

089: View transitions

SEP 19, 202441 MIN

Description

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) Twitterhttps://goo.gle/452aBRb YouTubehttps://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) Twitterhttps://goo.gle/3yFnHYu Instagramhttps://goo.gle/3wUb6QJ YouTubehttps://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