View Transitions are a brand new totally rad cutting edge feature in the browser. They allow you to specify animation states from one state to another a lot easier than ever before. But guess what? We’re still bad at them. In this episode Adam explains how awesome View Transitions are by explaining the difficulties of the FLIP animation technique. Adam then discusses how he struggled, but finally succeeded, to build a morphing button with View Transitions. Oh and we also discuss how Adam isn’t a TypeScript fan, but you’ll have to listen to the end for that part.Links:Morphing Button - https://youtu.be/N2BKAKwGP6MView Transition Pseudos Visualized - https://codepen.io/bramus/full/xxQKvJPView Transitions like isotope.js - https://codepen.io/argyleink/pen/VwBKjwjChapters:0:00 We are bad at CSS0:54 Why are we talking about View Transitions?4:03 Adam sings MMMBop4:24 What problem are View Transitions solving?5:29 Adam’s Mickey Mouse impression5:44 Using FLIP to explain what View Transitions solve6:27 Adam’s amazing getBoundingClientRect() joke6:45 Using FLIP to explain what View Transitions solve9:00 Tweening was easier in Flash10:45 View Transitions simplify the amount calculations needed to animate12:54 David is plugged into the Matrix13:40 MPA View Transitions require no work! (but need a flag)14:20 We are going to see some of the most wild transitions16:35 What is Adam bad at with View Transitions?22:04 What is a functional pseudo selector and why is it so fun to say?23:50 Adam continues to be bad at View Transitions25:35 Adam gets to talk to browser engineers to tell him why he’s bad26:33 A rare case where height 100% did something29:10 Adam gets even worse at View Transitions30:00 Understanding view transition image pair and view transition group35:29 David is bad at Sesame Street37:55 An amazing visual of View Transition Groups and Pairs39:52 Can you use other properties than transform and opacity?40:27 Adam’s leaves to go tend to his kids42:00 We’re finally wrapping up45:33 Fun fact: Adam is not a TypeScript fan47:12 View Transitions like isotope.js49:32 Stay humble or CSS will humble youVideo moments23:10 - functional pseudo selector30:00 Understanding view transition image pair and view transition group34:00 Especially here37:55 An amazing visual of View Transition Groups and Pairs47:12 View Transitions like isotope.js
No persons identified in this episode.
No transcription available yet
Help us prioritize this episode for transcription by upvoting it.
Popular episodes get transcribed faster