Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
The View Transition API is amazing... but we're bad at it
1.4k Plays1 year ago
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
Recommended
Transcript
Introduction and Purpose
00:00:01
Speaker
Today, David and I were bad at something. Maybe that's not surprising since you tuned into the bad at CSS podcast. But, uh, ironically, I've been using this new API called the view transitions API. You'd think that makes me good at it. It does not. It means I'm finding all the things that I'm bad at and I want to talk to them.
Podcast as a Learning Tool
00:00:20
Speaker
with David today to help me kind of understand it more. It's almost like rubber ducking. You know what, David? Maybe this show is kind of like rubber ducking where, hey, I'm sucking at this. Can you help me? And then by me just telling you about what I suck at, I'll be like, oh, snap, dude. I answered my question. I thought I just do the show so I didn't have to read MDN. So like when I don't know what an API does, I'm like, well, why don't I just start a podcast with Adam? And then he'll just tell me what everything does and then I'll have to read. So I don't know. That's pretty good for me.
00:00:48
Speaker
healthy relationship, yin to yang, good to bad. Although in this case, I am bad and you are worse. So maybe this is the, this is the, I'm sorry, I don't mean to make you sound that bad.
Initial Struggles with View Transitions API
00:01:02
Speaker
I just know you haven't used to it.
00:01:07
Speaker
All right. So here's some things I suck out. Oh yeah. Go jump in, man. We catch your breath. Get your breath back. I'm just saying it's true because I am I, so I, I've seen you transitions. So I guess let's set the stage. So Adam, Adam, like I said, I've said to the people in the past,
00:01:24
Speaker
Adam shouldn't be on this podcast because you know, we let him on anyways, cause he's not bad at CSS. He's humble and he, you know, he will be like, Oh, I'm bad at this. And you know, then we kind of say like, well, well, look at our CSS then. But what I would, uh, what I, Adam has been just pushing on view transitions, just like one of the biggest people in the world on it. It's been amazing to see all the stuff that he's pushed out on it. Just amazing talks, amazing videos. It's awesome. We'll link everything to the show notes.
Understanding View Transitions with Adam
00:01:51
Speaker
I.
00:01:52
Speaker
You know, I've been watching those. So, you know, I've been really getting the work in on that. So today we're just, I'm going to be asking Adam questions and he's going to tell me what he's bad at. And I'm just gonna, you know, maybe, maybe be less bad by the end of it. So Adam, what are you bad at with view transitions?
00:02:11
Speaker
Awesome. I have to make two jokes though. They're just kidding. I'm like, Oh, you know, but all that, all that work that you've been doing watching your eyes must be really tired. You know, you kind of give them a little relaxed. I need those blue, like light glasses. Cause it's just so much content, you know? Oh man. The eye fatigue is just killing me. And then the way you described me is so funny. It reminds me of people that are, you meet that are like, Oh, I'm not very good at guitar. Can I see it though? Can I see the guitar?
00:02:37
Speaker
that is you have the guitar and they're like dude you said you're not good they're like yeah but I'm not that good I only know one or two scales guitar I don't do that with CSS I'd still show up and be like clunky plunky clunky no it's not true
00:02:59
Speaker
I've had sessions with Adam where I'm like literally showing him like a Figma design or just even like a sheet of paper. I'm like, well, how would I do this? And I was like, Oh yeah, that's, it's super hard. I'm not really good at that. Hold on one second. And he's like talking about it. And I'm like, wait, are you typing and talking at the same time? And he's like, yeah, yeah, hold on. And then I get a co-pen link and then it does it.
00:03:19
Speaker
And I'm like, and then the problem is I look at the CSS code and I don't know what so many of these things do in the CSS code. And I'm like, what's app property? And he's like, Oh man, app property is rad. You got
Learning and Experimenting with the API
00:03:30
Speaker
it. Okay. All right. So, and out of impression. So this is, this is true. So I'm one of the biggest reasons too, I want to start this podcast with Adam is because I do want to eventually hear a time where he's like, I'm bad at this. And I'm actually like,
00:03:47
Speaker
Yeah, you are. That is bad. So maybe today, maybe we'll edit out the park on the first one. So Adam, please, what are you bad at? Geez, okay. I've been writing few transitions for a while now, right? There's the SPA version and the MPA version, the spa and the MPA. Give us like a reason.
00:04:08
Speaker
Sorry. I'm not sure what that that was. Willy Wonka or Hanson for. It was Hanson. Although Willy Wonka, I should have chose that. That's way less embarrassing than. No, it's great. Explain to me why do I need view transitions in the first place? Like what problem is it solving? You know, why do I need to learn yet another thing in web development, you know?
00:04:34
Speaker
Yeah, there's a concept. I think it has a lot of use cases, but one of the core ones was obviously page transitions, but simultaneously flipping transitions where you were first, last invert playing, which is just, it's fun to say. It's not fun to teach people what it means. You know, you're like, Oh, you flipped the animation.
00:04:56
Speaker
Flip it and you're like crap this is actually really hard to describe but the reason that we
Exploring Technical Challenges
00:05:02
Speaker
would do that and why it's related to view transitions is you got first which is almost like state one of your board or page one of your multi page application.
00:05:11
Speaker
And then you have last, which is like the next place you're gonna go or the next state of your art board or whatever. So you got first and last, and then you have to measure both of those in the flip concept. You're like, okay, first, what size are you? Where's all your children? How many children are there? Oh, so much information I know. And then anyway, I sound like Mickey there for a second. There you go, the next one. How many children do you have?
00:05:38
Speaker
We already have the greatest podcast. This is awesome. Okay. So then last, then you measure last and you say, okay, let's keep it real simple. Let's say you had like a square in the top left. Oh, this is even really fun. Like view transitions demo that I built is you can animate the alignment properties of grid. So.
00:05:57
Speaker
which is not possibly, you can't animate those currently. They're discrete, and they're not a value that can just transition over time. Okay, so what you could do with view transitions is you're like, the box is in the top left for the first state. In the last state, the box is in the bottom right.
00:06:14
Speaker
And then what you have to do before the View Transition API is you would say, OK, first, where is the box? So you did the grid layout, you got the box, and the position would justify an alignment at the start position. And then you look at its Git bounding client rect, which always sounds like you're looking at its butt. I hate that API name. Intrusive API. You just call it a colonoscopy. You're like, all right, where are you at?
00:06:44
Speaker
get bounding client rec. And then you do last. So basically you apply the new grid positions and you say, and you justify it a line to the end and it goes to the end. Um, and then you have to like even do weird crap, like maybe wait a frame for the browser to actually draw it there, read it, actually put it there. And then you say, all right, get bounding client rec endoscopy and doscopy. I don't know. I'm not very good at those words. I don't even know. That's cool.
00:07:11
Speaker
Colonoscopy, semi-colonoscopy, is that a thing? That would be funny, that's a dev joke too. Okay, so I'm getting distracted just punning.
00:07:23
Speaker
But now we have last. So last, this box is aligned to the end. It's at the opposite corner that it was before we get its positional data. I'll say it appropriately now. And now we have first and last. So it's like we're looking at these values on our hand. We know where the box was, and we know where the box is. And then we invert. And that's the I in flip, or inverting, which means
00:07:45
Speaker
We just measured last, which means the box is still at the ending position. But wait a sec. We want to animate from the first one to the last one. So we have to invert it. We have to say undo the stuff I just had you do. Go back to where you were, foo. I just arrived. I felt like I had to say it. So now the box is back to starting position.
00:08:03
Speaker
We know the positional data of where it's from and where it's going, but we know that as data that's absolute information. And that's one of the frustrating parts about Flip is Flip only deals in absolutes like a Sith. You're a Sith Flip dealing in absolutes.
00:08:18
Speaker
But it gives you the information that you need to make a seamless animation. So now you can say, play. And that's the P of flip. And play is just you saying, go from this positional data one set that I know of to positional data set two. And voila, it didn't take much work at all. Did it, David? This was easy peasy. I'm being sarcastic. Your box goes from the top left to the bottom right.
00:08:42
Speaker
That's the problem space that we've had with a lot of these things is that flip concept is the only way to do these like morphing dynamic positional in-page animations
00:08:55
Speaker
And it's been kind of frustrating where it's like in flash 20 years ago, you could just drag in a box to the bottom, right. And it would be like, hi, we see that your box has two States. Now you made a new key frame. You dragged it somewhere. How would you like to tween between these? The concept of tweening has always been stuck inside of transitions in CSS. Um, but now we have that with view transitions and you can kind of just modify the DOM.
Complex Aspects of View Transitions
00:09:21
Speaker
and it will acknowledge, as long as you modify the DOM and prepare it, it will acknowledge a keyframe of one, a keyframe of two, your first and your last, get automatically created for you by the browser, and then you have the opportunity to just customize the tween.
00:09:35
Speaker
And that's why we can animate the alignment of grid. We can animate display none. We can animate anything we want because the browser sets up the keyframes, figures out the Delta, and gives us the opportunity to set a duration, set an easing, and to find keyframes if we want, and all sorts of cool stuff. I don't remember where I started, but I ended all serious, and I started a little goofy.
00:09:58
Speaker
I like though that you made the flash reference because when it comes to flash in modern day web development, there's this bit of like Simpsons did it like bit of it. So whenever someone's like, Oh, you know, I'd really like it if we had this ability to do it. And someone's always like, well in flash,
00:10:15
Speaker
you know, like Simpsons did it, Flash did it, Flash had it, like, you know, always like, you know, it'd be really nice if I had this like stronger type language and like Flash did it. And it's like, oh, well, if I could just do sort of like this stuff with animations, Flash did it. And so it just reminds us of like how for this, you know, there were problems with it. But for this moment in time, we had like this, all these things and then and then we lost them all. And then now, I guess we're now we're getting them back.
00:10:43
Speaker
What I love about your explanation is that if you ask some person, some CSS web developer who keeps up with some of the new things coming in and you're like, hey, what's the View Transitions API? They'd be like, oh, that's that new one where it makes page transitions and element transitions easier.
00:11:07
Speaker
And then people were like, okay. And then your explanation was, let me break down flip for you, just so you understand how painful that process is and how it solves everything. Because that was amazing. Because it's true. Basically, from what I've seen is that
00:11:26
Speaker
when you you have to there's like there's a JavaScript API part of it and then there is a CSS part of it. And so the JavaScript API is the document start view transition callback function. And that's sort of how you market that you're doing your job and like things are happening. And
00:11:42
Speaker
From what I understand, so please, this is where I'm horrible at CSS, is that's like when the browser knows to take that screenshot or the freeze dry your page at that moment and say like, okay, everything is kind of like this way. And then the CSS does its thing, makes its change, its animations, transitions. And then it goes, oh, I know to compare.
00:12:02
Speaker
the results of these CSS transitions or CSS these operations with that original freeze dried snapshot I have. And then just like how you would see and like, you know, any Adobe product that has like that or magic move in like
00:12:18
Speaker
you know, on what's the other one? I don't know. There's smart animate. There's auto animate with yeah, exactly. Oh, that sounds like a screen flow thing. I don't know. Yeah, basically all those things. And so you don't think about the animation too much. You just kind of just say like, I'm going to go over here and then magically it happens. And then you don't have to know flip is that I assume that's do I did I interpret that right?
Continuous Learning and Future Speculation
00:12:42
Speaker
nailed it and you, you know more than you, than you say you do. You, you said the API name, you've seen it, it internalized for you. When you told me you're like today we, so Adam, I literally, I sound like a week ago, I was like, Hey, what do you, what do we want to do as a topic? He's like, I figured out. And then literally this morning I was like, Hey, what are you doing? He's still like, I figured out. And then literally like 10 minutes beforehand, he was like, Hey, let's do it on view transitions. And I was like,
00:13:10
Speaker
Okay. And so I literally just start watching YouTube videos on two X and I'm like, and then I, so I did like about, I don't know how long have you been recording? Uh, minus five minutes. That's like the matrix. That's like you plugged into the matrix, man. You did two X YouTube videos. You're like, Oh, I know it all. You, you work in dev rel too. You know, that's how it is. You're like, what do I need to know? Okay. And then you just plug the thing in the back of your neck and then you learn it. And then, uh, and then you forget it all in about 10 minutes. So I won't remember the method name by the end of it. So that's okay.
00:13:41
Speaker
Yeah, you did good, though. Yeah, that's how you articulate that you're trying to... Before you change the DOM, you need to tell it, at least in the JavaScript API. The multi-page one, you don't have to tell it you're going to change the DOM because you click the link.
00:13:52
Speaker
It's like, oh no, I'm destroying the page and creating a new one. You don't need to warn me first. That's in Canary. Yeah. Yeah. I think I saw those in Canary. That I'm very excited about because getting out of the box transitions for MPAs, multiple page applications is awesome. To be able to just say, give me a crossfade here. It doesn't have to be anything fancy. It's so sick.
00:14:17
Speaker
Yeah, it's one of those like instant wins where it's like, I think a lot of people, my assumption of what is going to haption, haption, haption, I mean, you know, I like it. Sounds like a real word. It should be.
00:14:33
Speaker
What I think will happen is when it releases in mass and then adoption picks up, and I think obviously it will for this. It's shiny, it's fun, it's cool. I think we're going to see some of the most wild page transitions. And it's going to be like when you first learn Photoshop and you're like, I'm going to use every single tool in this panel on this one project. And then Photoshop's just like, hold on now.
00:14:58
Speaker
When you know, most people are advanced Photoshop users are like, I maybe use like six on a day to day basis. And then I have to reach and relearn others. And I think like a crossfade is probably going to be just fine. And I think if you can hold that discipline of like, I'm not going to build, you know, unless you know what you're doing or you have a great vision.
00:15:17
Speaker
But for your personal site or for any reading site, a crossfade is probably going to be just so massively better than just the jarring flip, or not the flip of the white page or the dark mode or whatever it is. I think that to me is going to be, that's my mindset, is for sites I'm going to add it to, I'm going to be like, let's start with the crossfade. And then if we have some inspiration or if there's some interaction, that's good. Then let's go from there.
00:15:46
Speaker
But I'm still very excited to like tap on a page and then see like a Star Wars like, like flying out of the page or like some spiral Batman sort of thing where it's like, I'm very excited for this. It will happen. And I'm excited for that too. And then hopefully they do reduced motions that way in case everyone because otherwise,
00:16:12
Speaker
We'll have a record amount of people throwing up on their computers after they view your blog. Be like, Oh, I'm going to check out the sweet blog I saw on Twitter. I heard it used to new people. You just went through all of that. No, you talk about flip. You talk about, you know, throwing up on your computer, which is a skill and of itself. And, but you still haven't told us what are you, what is bad? Cause it's like, you painted the picture of like how this is hard. What am I bad at?
00:16:41
Speaker
Yeah, because it seems like, because what you've sold me so far is, hey, Flip, and I totally knew of Flip, did not want to really go there because that was very complicated. But Flip, I get the concept. It's tough. I don't have to flip anymore. I just call that method and set up my CSS and I'm happy. Why? What's hard? If we're painting a picture of how the grass is greener, why, I guess, are there some dry patches or something?
00:17:12
Speaker
There is definitely some edges that are complex where I'm still struggling to internalize them. That's what I'm hoping to do today is by explaining the parts that are really difficult for me, probably poorly describing them to you, you asking great clarifying questions, co-host, awesome co-pilot,
00:17:32
Speaker
maybe I will be able to internalize these more. And this is also means we're going to get into like some of the advanced edges of this feature, which might even be a sub goal of this podcast. I'm just realizing that if we talk about what we're bad at, it's probably the hard parts, which makes it probably a kind of advanced podcast. I love sub goals. I'm always in a Sonic creating tasks and sub tasks and milestones and sub milestones. You're speaking my language, man. Goals on goals on goals, goals on goals on goals, more goals.
00:18:01
Speaker
They have one up just to what, what is something like, give me, give me an example. What's something you did lately where like, I want to get like, do you have, have you, did you have one of those moments that we all have as developers where you're like, Oh, Bill, this is going to be great. And you run it and you're like, this, this is so far, so far from what I wanted to do. And then you're like, and you literally takes you like an hour and then you're still like, okay, well now I maybe can see what I want to do, but it's still, it's pretty, pretty far from what I want to do. Like.
00:18:31
Speaker
Yes. Okay. So here's what happened to me the other day. And then this will lead us into the parts that are really fuzzy for me. I made a morphing button demo and I saw this, I was on some app. I don't remember where I was. I think I was on my mobile phone or something like that. And I hit a button and it was like sending and had a cool icon.
00:18:51
Speaker
And then it transitioned to doing another thing and the buttons width grew to fill the content. And then, you know, stuff happened and then it shrunk and then it grew and it had, I was like, that's a multi-state transitioning morphing button. I was like, that's really cool. I see these all the time. That would really be a pain in the butt to try to animate on the browser. Cause you'd have to flip, right? You'd have to know what's the width after the text changes and all this crap. So you're like, let's do it.
00:19:19
Speaker
I was like, I'm going to go build this with you transition. This will be easy. At least, you know, that's what my mind always says. It's like it sees the pieces so clearly like these are the capabilities that it takes. And then I sit down. I'm like, oh, there's some tough parts. So I made a button. I made a button. You click it and sure, it changes the amount of text in it. So let's just say it gets wider and it gets smaller and it gets wider and gets smaller.
00:19:42
Speaker
The first step in this task for me was to bring in some JavaScript. I had to call document.start view transition, and then I set the inner HTML of a button. And then that gives me an immediate crossfade between states, which is really nice, actually, that that's what it'll do.
00:20:01
Speaker
so that you can do anything you want to a node. This is in React. Also, you could theoretically put this into the component lifecycle architecture, that if it's tree changes, you call document.start view transition, and then it just elegantly cross fades between the old and the new one. I'm telling you, this is a core thing that needs to be in. Anyway, okay, so that's the first step. The second step was, I need to think. No, you just made another JavaScript framework.
00:20:28
Speaker
I just made it just, just dropping bumps. I need to go fork every
Image Pair Concepts and Humorous Tangents
00:20:31
Speaker
framework. Yeah. You just made another job. Yeah. I just had to say that it was good. No, it was worthy. Okay. So now I've got the JavaScript API calling up prepared the browser before and after it's cross fading my things. Um, but that's not the effect that I want. I don't want to cross faded, but I want a morphing button.
00:20:51
Speaker
So to begin morphing in the view transition API, you give it a view transition name. So I go write some CSS, I say select buttons, or I only had one, whatever, select this button, give it a name and I called it, who cares? That is what I called it. No, that isn't what I called it, but I should have called it that. We're going to call it that now. So the who cares button now has a view transition name.
00:21:12
Speaker
this is where things start to get more complicated. I gave it a name and I clicked my demo and it starts morphing. But the thing is, the browser is in the View Transitions API, very concerned with aspect ratios. So if you've got a button that's kind of in a four by three, it's got like an icon and a short word, and then you go to a really wide button that has like a long message in it, when it preserves the aspect ratio, it has to scale the thing visually up to the width
00:21:42
Speaker
And it has an undesired result. You literally see the thing scale up and scale down between the two states. And you're like, this is not the morphing button that I wanted. I wanted a morphing button that sort of was squishier and only changed the width. I only want to change the width really. Like the height needs to stay stationary.
00:22:05
Speaker
So in the ViewTransitions API, there's a way to target the old state and the new state as it's going to be transitioning. And they're called ViewTransitionOld and ViewTransitionNew. And inside of those functional pseudo selectors, you put the name, which we just decided so elegantly as who cares,
00:22:26
Speaker
Also, how fun is that to just say functional pseudo selector? That is definitely like a conference one where you're like in the hallway at a conference and you're like, well, I was using the functional pseudo selector. And then someone sitting there is like, damn it, I don't know anything.
00:22:43
Speaker
I should totally know what that is. That's like that Joey from friends where they're all, he's talking to the encyclopedia salesman who is Penn Gillette.
CSS Animation Challenges and Personal Reflections
00:22:51
Speaker
And then he's just like, he's like, have you ever talked to your friends and not knowing you're talking about? And he does the flashback. And then he's like, Mike, there's a little head shake. Like, as everyone's talking about complex matters, like, yeah, that's definitely one of those moments. That's a functional suitor selector.
00:23:06
Speaker
functional pseudo selector. I'll just spell it out just so it's clear, too. It's colon colon view dash transition dash old open parentheses. This is the functional part. So the pseudo part was the dots, the functional parts, the parentheses. So it takes parameters. CSS is not a real programming language, though. So it's not like there's parameters and functions and types or anything. Yeah, there's nothing like that. It's not real. Totally fake language. Anyway, so this fake language is taking parameters inside of a function. It's posing. It's just a poser language.
00:23:36
Speaker
and you pass your name in there, who cares? So this lets you specify which old pseudo element you're looking to target and which new one by that name. So I immediately, and I'm like, okay, if I've got an element that's maintaining its aspect ratio, and I don't want that, I need to target the old element and the new one, and I need to make them not do that, or whatever. So I'm like, okay, aspect ratio,
00:24:04
Speaker
I'm totally winging it at this point because I didn't get what I wanted. I got this zoomy, scaly thing. In my mind, I thought I was going to already be done. Sounds like a wizard. Zoomy, scaly thing. Fast wizard. Snake.
00:24:26
Speaker
Right. Okay. So I'm trying to solve a problem that I didn't know I had until I experienced it. And this is, again, this is where I was bad at the thing. In my mind, I thought I was going to be done just giving a view transition name, usually giving something a view transition name and letting it morph by default in the browser is top notch. And you're kind of done unless you want to change the timing or something like that.
00:24:45
Speaker
So I'm not done. And here I am writing this selector to look at the view transition old, who cares? View transition new, who cares? And I'm trying to tweak the styles. I'm trying to tell the browser, don't do the thing that's usually elegant. Do something new and stupid.
00:25:00
Speaker
And see, this is my theory, my theory coming out into play that no one's going to do like the elegant, the classic thing. Like we have to over engineer it. And this is your story of like, I wanted someone to click on a button and now here is where I am. Here I am.
00:25:19
Speaker
And I tried setting like a height on it. I think I set like a height of like two line height, two LH. And I was like, ooh, that's clever. Yeah, I'll just take the height of the thing, fix the height. And then it won't do the scaly dumb thing. It kept doing the scaly dumb thing. It totally didn't care. It was like, I'm in turn aspect ratios, you fool. You thought you could give me a height. And then I was like, I did think I could.
00:25:44
Speaker
Then I tried messing with aspect ratio and that wasn't working either. Essentially, I'm lucky and I get to talk to the engineers that work on this stuff. I go complain and I'm like, here's some secret sauce that you all don't know. Adam is so bad at CSS. He frequently goes to the engineers who built the thing and says, I'm not smart enough. They go, no, you're not.
00:26:06
Speaker
Here's the answer. And I'm like, sweet. Now I get to go look smart on Twitter. Hey, everyone. Here's how you do a super cool morphing button, which is a CSS.
Future Implications and Episode Wrap-Up
00:26:15
Speaker
It totally didn't take me like five hours and a whole bunch of conversations with engineers. Behind every dev rel tweet is six engineers being like, that's wrong. No, that's wrong. No, switch that. A hundred percent. And basically they're like,
00:26:33
Speaker
They're like, yeah, you're getting the aspect ratio thing. You don't want that. So just set height and width to 100% on both the thingies, on the old and the new. And I was like, you just set the height and the width to 100% like that. 100% usually is a really crappy value. That never works.
00:26:50
Speaker
100% doesn't work for Jack anywhere, you know, like that is such a stupid percentage. Okay, I'm being sarcastic. It has its moments. Anyway, whatever. So I'm like, oh, those engineers, they don't know what they're talking. I do heighten with one and then it works. And I'm like, gasp.
00:27:06
Speaker
Why? Why does this work? And then I like go into DevTools and I open up the animation DevTools and I slow it down to 10% so that my stupid brain, my slow brain can see what's actually happening. And I can see, so this is where we're going to talk about an interesting aspect of view transitions. It works with images, mostly. Whoa.
00:27:26
Speaker
So it takes a screenshot of your DOM node. So when you say start view transition, it takes a screenshot of your DOM node. So it's got like pixel data. And then it takes a screenshot of your other node, but depending on the new state, it's usually an alive version of it.
00:27:43
Speaker
But they still had to screenshot it and do some stuff. So if there's an animating element in it, if it's a video, it'll continue to play as it transitions in. So it's alive. The view transition new is alive in some ways. It's not necessarily as alive as when it's done. OK, whatever. Now I'm just confusing you. But let's just imagine you have two images. One is small and one is large. And when I told them through this selector to be height and width 100%, they form fit.
00:28:09
Speaker
Into the the button itself and that's what caused the The the morph effect that I wanted because I just wanted the width to change and if you think about it That's all that was changing. I changed the length of text and the button with inner HTML
00:28:23
Speaker
It became wider, and so now it's forcing the image to fit inside of there, almost like if you did a background image and you told it to fit height and width 100%, it's gonna squish in there, which also means, because this is an image of the button, the text is squished, just like if you went into Photoshop and you reduced the width of the button by hand and you watched all the text squish together, not in like a responsive reflow way, but like in the pixel data, just squashing together.
00:28:52
Speaker
That's how the effect works and that's the result I ended up shipping because it was only a couple lines of CSS. The squishing is totally so fast that it's imperceivable and the text is all legible. If you're on a screen reader, they don't know that images got created. All they know is new text showed up, so it reads out loud to them just as you'd expect. There's all sorts of good things that happen here.
00:29:13
Speaker
Here's where I'm bad, David. Here's where I get worse, David. I thought we hit the resolution. No, we are just at the tipping point of which I can start talking about the two other pseudo selectors that failed me.
00:29:27
Speaker
that I wanted to use, but since I don't understand them, they weren't applicable and it's functional with a functional functional pseudo selectors. I had to say transitions API. You gotta, it just, I felt good. I had to feel good about myself. So yeah.
00:29:44
Speaker
They're pure functional. I'm like, how can we embellish this? And whatever. We've got two more now. And these are the ones that I kind of wanted to speak about today that I'm bad at. And maybe if I explain them to you, it'll make sense to me. I'm still doubtful because this is like my fourth time trying to understand these things. There's view transition image pair and view transition group. Bramus, a colleague of mine, knows what these are. He is smarter than me.
00:30:15
Speaker
And he's like internalized it. I asked him about it like a couple of weeks ago in Amsterdam. He's like, what's this? And that is totally easy. And I walked away going, damn it. Yes, it is. I do also find I'm not in my head. I was like, you did good explaining that. And I still don't know. I still don't know what this means to me. So, okay. So let's talk about the first one, which is view transition image pair.
00:30:38
Speaker
And you can pass the name that you gave the name to your view transition, like who cares? So you'd be colon colon view dash transition dash image, open parenthesis, who cares? Close parenthesis. And I would target both of them at the same time. Or so I thought, because I, I, I wrote that selector and said height and width, a hundred percent.
00:31:01
Speaker
I was like a refactor. I was like, I'm smart enough. I don't have to target old and new with this comma and all this junk. I'll just, I'll target the pair. And then I try to target the pair and it's like, doesn't apply the styles because the pair is, it's like a container for each of the individual screenshots.
00:31:23
Speaker
And that container lives inside of another container called view transition group, which also takes the same name of who cares. I see where you're going here. I'd like to give you an opportunity to ask questions really quick. So if you were, I think I know where you're going here because you're basically targeting
00:31:44
Speaker
you're not targeting what you think you're targeting. Is that sort of the problem? Like you're writing code and then it's applying somewhere else. And then you're like, why is this happening the way it's happening? And, and it's doing its job. You just don't fully understand the job that, that it's doing yet. Is that, is that, am I someone else? You're, you're, you're definitely on the right track. Like what we have to study, or at least I have to try to explain well, is that there's,
00:32:09
Speaker
There's two containers to these two images because in my mind and the way it looks, there's two images that just transition. The crossfade is really easy. You're like, ah, they just crossfade out. And you don't think about them having a container, let alone having another shared container. They just feel like absolutely positioned, free flowing, free living hippie smoking elements on the page, right? Yeah.
00:32:37
Speaker
and have a relationship with each other that you're not totally familiar with. Yeah, but it turns out the browser puts them in this concept called an image pair, and it has a concept of a transition group. So there's the transition image pair transition group. One of those containers, and I'm not really sure which one yet, I can't remember. I'm gonna try to scrub the document here to find out that I'm bad at this. One of them manages the positional morphing.
00:33:07
Speaker
Like the transform that needs to happen, the X and Y differences between one and the other. And it might even have like a larger group. Anyway, I don't know how to visualize this very well. Oh, you know what? Bramus has a really good visual. I should try to pull it up really quick. He shows the images themselves, then the group, and then the other thing. And you can kind of see why it's all there.
00:33:32
Speaker
But OK, so yeah, we have the image pair and the image group. What is this? OK, so it's the view transition group that does the position and the transform and also handles width and height, apparently. But I bet that's width and height of the container, not the width and height of each individual item. So then we have the view transition image pair. What does the image pair do?
00:34:02
Speaker
This is like live debugging. The image pair has to do with how these will mix blend mode together and it has isolation isolate. Yes. So it says here's from Jake Archibald's article says the old and new views have mixed blend mode plus lighter and the view transition image pair has isolation isolate. Oh shit. I was already wrong about it. Okay.
00:34:28
Speaker
Each individual image has mixed blend mode plus lighter. The pair has isolate and this is required to create a crossfade. So the isolation plus each of the children means they're only going to blend with each other and they're not going to blend with the entirety of the page. Got it. Okay, so the image pair is specifically for
00:34:50
Speaker
Isolation so that mixing in the blend modes and the crossfade can be in a contained thing that doesn't interact with the whole page, but they're isolated to each other. That also makes sense then why the view transition group is the one that can handle some of the morphing effects, the transforms and the transitions there.
00:35:09
Speaker
Okay, I think I got a little bit of clarity from that. Did you? I'm glad I can help. It's why I'm here. Just be there, sage wisdom, sage advice, help you through your problems. That's why we do this podcast together.
00:35:28
Speaker
Here's a question. Which Muppet is the one that sings Robert Ducky? You're the one. That's Kermit, man. So much fun. Is that why I'm singing a Kermit voice? Yes. Is that why I'm doing a perfect impression of him? I thought it was like Bert and Ernie or Elmo.
00:35:47
Speaker
Kermit has a rubber duck in the bathtub. I'm pretty sure it's Kermit. I thought it was Bert. Isn't Bert the one who's always in the bathtub and Ernie is like cooking or something? No, you're right. I'm such a, I have kids too. Oh my gosh. I mean, I have to scrub this out.
00:36:03
Speaker
We're bad at Sesame Street, too, everybody. Bad at the Muppets. I'm like, who's the guy who counts? You're like, it's that. I'm like, yes, it's also Kermit. Oh, my God. Kermit is the guy who counts. Muppet babies, too, versus Sesame Street. We're like way off on our IPs. We're like, is it Darth Vader? I'm unsure. Kermit, I am your father.
00:36:32
Speaker
Oh my gosh. Now, I mean, what are the things that
00:36:36
Speaker
I actually, I have a big question about view transitions and I'm pretty sure I know the answer, not because I actually know the answer, but just cause like, I just know how life works. But with the thing about, and the thing about animations normally is, is that you're like, oh, okay, I see how to do that. And you're like, okay, so I get kind of how request animation frameworks are like, okay, I get, oh, I see how to write these keyframes now. Okay. That's great. And CSS. Okay. All right. Great.
00:37:04
Speaker
And then everyone's like, oh, no, no, no, you can't animate the width. Don't do that. It's bad. Okay. Okay. Oh, well, what if I want to animate this other? No, no, there's like six properties you can animate. I'm like, but there's a lot of properties in CSS. And people are like, yeah, but you really, you can only animate these six. And then you're like, oh, why? Thinking you'll hear some CSS ability. And they're like, well, there's the GPU. And you're like, Jesus, I'm a front end developer.
00:37:29
Speaker
not an AI developer. With these, what can I animate performantly? Am I still stuck to all of my transform-based properties and opacity and all that? Or do I have a little more breathing space?
00:37:48
Speaker
This stuff is tough stuff. I'm sending you a link right now. It's Brahmins' Visual for the groups and the pairs. Oh, nice. And then you can fact check me and see how did I do.
00:38:04
Speaker
Ooh, you are, yes, you are right on the group part. Like we're on our own form of latency right now, uh, and it's doing different parts of the podcast. But yes, view transition, view transition group, view transition, view transition, image pair, view trends. It's transitioning as I'm reading it. So I'm like, I'm having the old and the new or cross fading. It's doing, it's cross fading. View trends. I'm like, read it fast. View transition, old group. Yes.
00:38:32
Speaker
I think you were right on this and this is, let's see how I could have used a source on this one. Okay. You know what? That's way less elements than I thought it would be and way less CSS is 151 lines of CSS. That's pretty cool.
00:38:48
Speaker
but it's got app property in there. We're going to need an episode on that because every time I see app property, I'm like, right. It's like the future of CSS that lets you have properties and stuff. And, and we like it cause it's cause it's good.
00:39:05
Speaker
It's like CSS. It's like AS two to AS three. Yeah. We have these variables version three. Nice. I like that you're completing this podcast with another, you know, flash reference with action reference. Oh man, you should hear my dance about how the movie clip, the movie clip component was way ahead of its time.
00:39:29
Speaker
Oh, yeah. Well, we could do an episode on that. We could. Yeah, she had lifecycle methods. It had a timeline built in. You could tween. You could go back in time. It was just like a div with an attached superpower for animations just built in it. Anyway. So wait, so to my question though, can I, am I still beholden to the
00:39:54
Speaker
The world of transform properties and opacity, or do I, can I animate sort of like to my heart's delight? You're still stuck to some of those things. It will do its best. That's why I know how the world works. Cause I was like, I don't get, I don't just get off like that. I don't get, it doesn't even get that easy. Like they're like, Oh no, no, no, no, no.
00:40:16
Speaker
You still got to be good, but it will do some of that work for you. So like when it does the morph effect, it will be writing a transform for you when it does, you know, cross fade, it's doing the opacity work for you. So it's kind of only when.
00:40:29
Speaker
So this is the part of the episode where we always knew that our children were going to come in and interrupt. And we talked about it and we said, you know, we're just going to do this. Children interrupting is part of this podcast. And it happened very first one. I mean, that's why we planned for this. And by planned, I mean, we just talked about it and now I'm just talking as it's happening.
00:40:52
Speaker
And, uh, and Adam is returning now. And I don't know if I could hear you the whole time. It was really fun. I'm like, I had a kid outside the door, making a bunch of noise, trying to get my attention. And I'm like, I see what you're doing. I need to stop that right away because it's totally not going to work bad at CSS, good at parenting.
00:41:13
Speaker
trying to be good. I feel like all I can do is try to be good because kids, they're not going to like you no matter what. They're like, you just told me no. I hate you. You're like, fine. I won't play with that. I'm sorry. That's how you feel. This is unreasonable.
00:41:31
Speaker
I mean, we can't branch into the kid stories, but I, yeah, my kid just last week at the campfire, like a little hot burning coal shot out from the fire. And he was like, Oh, that looks really cool. I'm going to pick it up. It looks tangible and I'm going to hold. I'm like, no, no dude. But I'm like, I get it. It's like red and shiny. I'm like, Oh. Too many cartoons where they're just like letting flames come out of their hands and they're like, this is my time. I finally get to do it. Yep.
00:41:59
Speaker
Let's see, I feel like we got through most of the stuff in there. The view transitions work was good. Lots of ramp up the concept of the image pair versus the group. I think that brought some clarity. Those are like the edgy, nasty details that you'll have to get into maybe, but maybe not.
00:42:16
Speaker
I feel like that's a good spot to wrap up at because that's the time. If my memory serves me correct, I think the journey we went on was we talked about why Vue transitioned in the first place. You gave us a very deep answer that most people, like I said, would be able to give
00:42:37
Speaker
like I know I wouldn't be able to, is that you instead of going with nice transitions, you talked about how diff the difficulty of doing things like flip transitions, and that I can't go and repeat that I will have to learn that when I edit through this podcast. But
00:42:52
Speaker
What basically flip is hard, lots of stuff involved. So instead, why don't we take a screenshot of the original state and compute the end state in CSS and let the browser do that hard work for us in the middle because that's who we like to do as developers. We like to just let the browser do all the work for us and then claim our job is hard.
00:43:12
Speaker
But no, actually that's, that's, I wish it was that easy. It's not, but so basically that's what view transitions does where you is now a much easier tool from getting from one state to the other and letting the browser help you get there. And most commonly right now, people are probably going to be using that for page transitions, especially in spas and soon in MPAs.
00:43:33
Speaker
Eventually, we're going to be doing that more on the element level, or you can still do that today, but I think as we get used to the API, that is, we'll get to the more of the element level. I saw that one Airbnb did where they did the back and forward on the choosing, and you could see everything squishing and morphing. It felt very real, and that was at the element level.
00:43:51
Speaker
And the difficulty there is, though, is that now while the browser is doing a lot of work for us, there's all these new concepts to learn about the work that it's doing for us. And there's that footprint that it's leaving that we have to learn to tap into. And a lot of those are the functional pseudo selectors. It doesn't feel so good. Nice.
00:44:10
Speaker
Though it felt way less fancy when you explained it. I was like, Oh, it's a pseudo selector with the parentheses, which is pretty Tom. Yeah. Yeah. I thought this was cool. It just sounds cool. But now we have all these new functional pseudo selectors we can.
00:44:26
Speaker
go through and we can use them for various life cycles of the animation, various parts of the animation, and that they all interplay with each other. And so you might have to set, you know, with 100% or not, depending on your use case. That's just a throwback to yours. But basically, yeah. So the difficulty there is that if you're going to want to learn this API really well, or if you don't want to do these transitions really well, you're going to have to learn this API really well.
00:44:51
Speaker
And the more, you know, this API, the more, you know, the work that the browser is doing for you, the better you can work with the browser on getting that result rather than just doing what I commonly do, which is called try it and say, Oh, Oh, okay. No, that didn't work. I mean, CSRS is the ultimate like mess around and find out language. It's like, that's pretty much all we do. Yep. Followed up quickly by JavaScript. Uh, where I think we do the same thing for like, didn't work. I'll poke it again and poke it till it works and then move on.
00:45:21
Speaker
No, TypeScript has really put a, has really ended that though with TypeScript. You're like, I'm going to mess with it. And it's like, no, you're not. Nope. Type undefined of mono function object is not equivalent to 17 lines later of error. And you're like, Oh yes, I will not definitely not copy the resulting type and paste it into the code. It needs me to do and just say that it's typed now.
00:45:46
Speaker
Of course, you don't like I put I put I poke ties TypeScript just as much as JavaScript because TypeScript is like you can't do that or this needs to be typed or it keeps telling me all these like little tasks I have to do. I'm like, oh, I guess I'll go do that little task and then that little task turns into two or three other little tasks and like, oh,
00:46:04
Speaker
Oh, we have to do a bad at CSS, but like, but TypeScript, like that'll be called the episode, but TypeScript question mark. And because people, Adam does not like TypeScript. I want to say doesn't like, but it's not a TypeScript fan. Adam's more of a job. I'm just not a typed language fan. I come from languages. I know what I'm running from and y'all are running towards a building that I'm like, that shit's on fire.
00:46:30
Speaker
And so I'm a big TypeScript fan, but the more friendship grows, the more that he does, he, his thoughts get into my head and then I do. And then when I run into TypeScript errors, I just think of Adam being like, you know, with his arms folded being like, what did I say?
00:46:45
Speaker
What I say, so I would really love to enjoy to do that. So if you all want to do that, just let us know because I would love to because Adam is, I imagine would only be bad at TypeScript, but by choice. So I'd love to get some of it and he can't run away from it. No one can run away from TypeScript at this point, especially with the stuff we do at work. I do a lot with TypeScript. So I write a lot. Yeah. I love to hear this. So because yeah, that would be, you know, so y'all let us know. But I think that's a fun episode.
00:47:13
Speaker
You did a really good recap. I want to just share a demo that I will put it in the show notes. And that is like a next good stepping stone for like, why the hell would I want to know these weird pseudo selectors and these other like the functional pseudo selectors. It sounds so simple. It sounds like you just do some little CSS, you call what function it's all good. No.
00:47:36
Speaker
No, it can get far more complicated than that. So I'm sharing a demo called view transitions, like isotope JS, isotope JS, classic, classic sort and filter algorithm that allowed you to do really cool.
00:47:50
Speaker
interactive visual sorting and filtering. It's just really lovely. With the lovely concept of position absolute. With position absolute everything, yeah, which also made it really hard to use in a page because you're like, what's the height of this stuff? It was like, download a plug and the plugin will set the height after layout. And you're like, wow, this is really getting difficult.
00:48:11
Speaker
So I built it in CSS Grid with regular layout, with few transitions, and I emulate every single aspect of what it does, which ends up being really complicated. Like let's say you're going to, well, who cares? Well, maybe we'll cover it on another one, but go check out the demo because it'll show these selectors that we talked about today, and it will show more. It'll attach only child onto one of those functional pseudo selectors.
00:48:36
Speaker
So you'll see combinations, the combatorial results of using these APIs together and what it takes to make a really. That was a really fancy like combatorial results.
00:48:52
Speaker
I'm glad it rolled out so easy. I thought it was going to be like combatorial specificity. Ooh. We just invented another JavaScript framework. But yes, check out the demo for a way to like, how do you make the old image go out in a different way? How do you make a new one come in? What if the old one doesn't have anywhere to go? Like it doesn't have a transform to do. So all sorts of cool stuff like that. Check out that demo.
00:49:22
Speaker
Yeah, I think that's pretty good for what I was bad at. I thought I was going to be good at that view transition button morphing thing. I was like, I'm going to knock this out. And then it ended up being really hard. And I was like, nope, I'm bad. That's right. Yeah. Forgot. That that's the truth. We're all bad at CSS. It's just no matter how much you do it, you know, you keep that, keep that humble attitude or CSS will humble you. Oh, Mike drop end episode.
00:49:49
Speaker
Well, uh, I'll take us out. Uh, thank you all for joining. Uh, I'm like, I'll do the hard job here. Okay. As my, as my family gets home, but like we said, the kids will be in the podcast.
00:50:01
Speaker
Thank you all for listening and, uh, we will, uh, be making more episodes and releasing them at a time that you will see them being released because that is our timeframe right now. So, uh, surprise, but we do actually, I know I got to name names or anything yet, but we have a couple guests in the pipeline and there's, I'm excited. I'm very excited. There are, I, that I almost said there's a couple I'm really excited about.
00:50:28
Speaker
in a way where I was like, wait, why would I say that? Cause I'm excited about all the guests, but it's in a way where someone's like, wait, he's not excited about one of the guests. Am I the in or out guest? Every guest comes out and they're like, which, which one am I? And I'm like, what? You listened that deep into the podcast. Oh no, I'm kidding.
00:50:45
Speaker
But at some point we'll have to end this podcast. So if you like this podcast, let us know, let us know and tell us the things you want us to talk about because we will literally talk about anything and we don't know if you'll like that or not. So just let us know. And, uh, thank you all for listening and we'll see you at the next bad at CSS podcast.