51 min
The View Transition API is amazing... but we're bad at it Bad at CSS
-
- Technology
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/N2BKAKwGP6M
View Transition Pseudos Visualized - https://codepen.io/bramus/full/xxQKvJP
View Transitions like isotope.js - https://codepen.io/argyleink/pen/VwBKjwj
Chapters:
0:00 We are bad at CSS
0:54 Why are we talking about View Transitions?
4:03 Adam sings MMMBop
4:24 What problem are View Transitions solving?
5:29 Adam's Mickey Mouse impression
5:44 Using FLIP to explain what View Transitions solve
6:27 Adam's amazing getBoundingClientRect() joke
6:45 Using FLIP to explain what View Transitions solve
9:00 Tweening was easier in Flash
10:45 View Transitions simplify the amount calculations needed to animate
12:54 David is plugged into the Matrix
13:40 MPA View Transitions require no work! (but need a flag)
14:20 We are going to see some of the most wild transitions
16: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 Transitions
25:35 Adam gets to talk to browser engineers to tell him why he's bad
26:33 A rare case where height 100% did something
29:10 Adam gets even worse at View Transitions
30:00 Understanding view transition image pair and view transition group
35:29 David is bad at Sesame Street
37:55 An amazing visual of View Transition Groups and Pairs
39:52 Can you use other properties than transform and opacity?
40:27 Adam's leaves to go tend to his kids
42:00 We're finally wrapping up
45:33 Fun fact: Adam is not a TypeScript fan
47:12 View Transitions like isotope.js
49:32 Stay humble or CSS will humble you
Video moments
23:10 - functional pseudo selector
30:00 Understanding view transition image pair and view transition group
34:00 Especially here
37:55 An amazing visual of View Transition Groups and Pairs
47:12 View Transitions like isotope.js
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/N2BKAKwGP6M
View Transition Pseudos Visualized - https://codepen.io/bramus/full/xxQKvJP
View Transitions like isotope.js - https://codepen.io/argyleink/pen/VwBKjwj
Chapters:
0:00 We are bad at CSS
0:54 Why are we talking about View Transitions?
4:03 Adam sings MMMBop
4:24 What problem are View Transitions solving?
5:29 Adam's Mickey Mouse impression
5:44 Using FLIP to explain what View Transitions solve
6:27 Adam's amazing getBoundingClientRect() joke
6:45 Using FLIP to explain what View Transitions solve
9:00 Tweening was easier in Flash
10:45 View Transitions simplify the amount calculations needed to animate
12:54 David is plugged into the Matrix
13:40 MPA View Transitions require no work! (but need a flag)
14:20 We are going to see some of the most wild transitions
16: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 Transitions
25:35 Adam gets to talk to browser engineers to tell him why he's bad
26:33 A rare case where height 100% did something
29:10 Adam gets even worse at View Transitions
30:00 Understanding view transition image pair and view transition group
35:29 David is bad at Sesame Street
37:55 An amazing visual of View Transition Groups and Pairs
39:52 Can you use other properties than transform and opacity?
40:27 Adam's leaves to go tend to his kids
42:00 We're finally wrapping up
45:33 Fun fact: Adam is not a TypeScript fan
47:12 View Transitions like isotope.js
49:32 Stay humble or CSS will humble you
Video moments
23:10 - functional pseudo selector
30:00 Understanding view transition image pair and view transition group
34:00 Especially here
37:55 An amazing visual of View Transition Groups and Pairs
47:12 View Transitions like isotope.js
51 min