How to Create Smooth, Lightweight Website Animations

So they? We started with the video. We talked about animation in general and their purpose and how to get them right, and then we discussed a bit about the fact that animations. You know, sometimes you need to do tricks to make animations look right and fluid. Mm-hmm. First, let's start with a problem, okay, what is the problem that we're trying to solve? So the big problem is layout animations that's one of the most commonly requested animations where you want parts of the webpage, whether it's a small part or a big part. To smoothly transition from one points to the other points. And you might think that's pretty straightforward, just in the meat lab. Door Enemy with or animate height, but the problem is that animating those properties aren't very performance. Can I just first ask you to give me an example, so that we use this example throughout, you know, the explanation, an example of a layout that you want to animate? Oh, there's many examples, I think one of the common ones is if you go on your mobile phone and you look at your photos app, if you tap a photo, it doesn't just show up out of nowhere it, it smoothly animates from its small tile to a bigger view, and then you could collapse it right back down.

Okay, and that's why you call it layout animation, right, right, because you're changing both the left top with height, so all of the layout properties, right? So now the problem, you're saying it, when animating layout is performance, right? Why? Why is that? So performance is a problem, because when you animate laptop width and height. CSS on every single tick is going to do layout recalculation. And what that means is that when you adjust the layout, it's going to see what are the elements next to it? Okay, I have to figure out the positions of them, even if the elements might not affect anything else. CSS in the DOM is still going to check all of those elements again to see did the layout change. Do I have to change anything else, right? And and how to do about it? So basically you're saying, if we're using weights like all these position yet properties they affect, layoffs, they do. I mean, they're supposed to, and that's why it's.

Yes, it has to absolutely calculate that, right? Yeah, like, for example, think about block layout when you change the height of something, it might push something down, right? So not only does this need to be recalculated, but any element next to it needs to be recalculate. And you're saying, even if there's nothing else, right, right? Okay, that has in any way might assign nothing exactly. And why is that a problem? Is it like it will not be able to handle it, or what will happen if we, if we use it, what we will see? So if you do it with a small website with not too many elements, the answer is not much. You might still get a smooth 60 frames per second animation, however. Well, 60 frames per second is important to get 60 frames per second is important. Because that's the natural refresh rate of a monitor. And so everything is smooth. That succeed, that's like your smooth rate right there. But when we do one, we have a website with a lot of elements and a lot of things laid out, then we typically will not get that.

60 frames per second. Just because there's so many calculations occurring behind the scenes in order to figure out the layout of all of the adjacent elements. So what would like? Imagine like it's on a one of the frames of the 60 that's 25 v during, and now it's calculating. I mean, I'm taking too long. What else happened there? It'll skip a frame, I will skip it completely the frame. Okay, and you will notice. I promise you will know this, because you'll know said, Oh, it's not, it's not about that. Yeah, just like you know this. If there's a scratch on your car, you're going to notice that there's a skipped frame, right? Yeah, and so now, okay, we understand the problem, how to do about it. So what we could do is use two properties opacity and transform, and the reason we use those properties is because.

Instead of the CPU calculating the layouts for everything, now we're moving the elements to the GPU, which is the graphics processing unit. And so that's going to put it on a layer where it's like, it's. It's in its own magical world, where you could change, though, you. Could change the scale, so not the width and height, but the scale X, the scale Y. You dude, translate X, translate Y. You could do all of these what are call transform matrix operations on that element without affecting layouts. So the layouts not even aware of what's going on, right? Because transform does not impact the layout anyway, right? If you think about it like in the block layout or something like that, when you scale something or you transform it, everything else stays the same. Okay, yeah, so, and that's the trick ACTU to. If you use transform and opacity, you said, then will happen on the GPU and it will not affect the layout.

So you, you will not run into skipping this kind of frames exactly. And so you could have very performant animations by only animating one of those two properties, or both of them if you need to. Now, isn't it limiting only having to use transform and opacity to do maybe some more complex that? You tell me the photo to come from here to filling the layout, you would, you would think it's limiting, but with a few tricks, there's there's. Actually, we say, you could accomplish a lot of animations with just those two, so one of them you talk about is flip. Yeah, so there's this flip technique, and I don't mean flipping like that, but it's. But the name is cool anyway. Yeah, yeah, it's an acronym coined by Paul Lewis over at Google a few years ago, and there are actually two mnemonic it's F stands for first, L stands for last, I stands for inverts, P stands for play.

Yeah, and so the way it works is you have an element in one position, right? And then when you're layout changes, first you measure what you keep measure of. What is the first position of that element. And then you do the trim, the layout change or whatever, and your elements gonna change. But right before it paints, you measure the last position, so now you have those two positions, first and last. So you could measure how far to the left, or how far up, or how big. How small did it become? You could do all those measurements, that's just, you know, simple math, and then you invert it so. When the elements in its last position. Now that you did those calculations, you could move it to its first position. So you're giving the illusion that it's still in its first position. I see, and then comes the play, so play means, since you did all that inversion, just transform everything back to zero and it's going to move to its final spot, right?

So basically, first you do the calculations, or the first, the last position. Mm-hmm. And then you actually display the target layout, right? You, you don't display it, but you write you, you do you, you, you send it, but before rendering mm-hmm, you, you display. Do you transform it into the initial one? Because you have the first position, you know where it is, and then you animate it back? Exactly, yeah, okay, nice trick. Now can you give us examples of how can you use that for different? For a concrete example, so many different things. The Photogallery example that applies to both the web and mobile. When you have a tile or a bunch, like a gallery of photos, you want to click one, you want to expand it. That's usually a common task in a web site. Like if you go on Medium.com, you know those photos where?

If you click on it, it sort of expands to take the width of the screen. And then you click on it again. And then it strengths back. So that would be an example of that. So basically, what you do here is that you get the target layout mm-hmm. And then you transform it back to the 2, to the small staying right, and then you animate it back. - yep, - the big thing and the reason you do that is because it's simpler to end me to 0. Because all you have to think about is just OK. Remove all the transforms and everything will just go back to actually transform in it. And it's a back to the initial state and it elevates it back. Yeah, I think that like, have you ever played with those little sponges where you can make them really small? And then if you just drop it, it goes back to its normal size? Yeah, OK, so it's just I like, I like the metaphor, but now that does it only.

Work when it's like, are there special cases? That might seem complicated to do with the flick, with the flip technique? Yes, there are, so nested elements are a little bit of an issue.

Play from 0:00

And that's because, let's say that you have some content, like some text, so we're not just talking pictures here. And you wants to sort of like, grow it or shrink it or something, and so the container that's going to grow or shrink or move somewhere. But when you do that, the contents inside, even though that probably shouldn't change size, because it's like text or something. What's going to happen is when you invert it, the text is going to be smushed or stretched or something like that, and so you want to avoid that. And so I talked about a trick where instead of inverting the entire element, you invert some sort of background element. So instead of just the text, or like the entire elements, the text saves alone, so the text is just going to move with the container elements. But now you have a background element that grows and shrinks, and so you still have that illusion. So it's sort of like an illusion on the top of an illusion, right?

Yeah, so let me see, like, if you have in imagine, is it the right example? Say, like, if that photo gallery was text gallery, mm-hmm, okay, we had a limit that had text and we have to click on it and then it moves and it becomes bigger. Is it a good example? Sort of, yeah, so, or take a here's an example, take a body, right? You have a small button with text inside. And let's say that your designer wants this effect where when you click the button, it goes full width. Okay, or like stretches or something like that. It becomes bigger, so when you do the flip technique, you're going to have the bigger one. The text is going to see the same size, text is not going to change at all, but when you drink it now, the text is going to be shrunken. - mm-hmm.

And so now you have to stretch the text and then you have to shrink it, and it becomes very confusing. Yeah, but if the button stays the same size, the text stays the same.

Play from 9:00

Size. And the only thing you animate is some background elements. Mm-hmm, then that's gonna be what can be over the back of the background, like a like, a pseudo elements. Or, you know, you could put a dip in there, right? Okay, I see, okay. So that's how you can manage that, that complexity, exactly okay, by transforming another element. Oh yeah, any other cases that you think of, so complicated with a flip technique? Other things that might be complicated is rotation. Hmm, so that one, you have to do some matrix calculations and that gets really hairy. But typically, people aren't rotating things, or, hopefully, people Prince rotating things too much on the web. But for most use cases, the flip technique, as is, should work pretty well and do it like you do. You have some kind of place with documentation resource where people can dig deeper into the flip technique?

Sure, yeah. If you look at Paul Louis's article on arrow Twist Comm, he describes the flip technique in there. I wrote an article for CSS tricks about it, we talked a lot about Anki Framers. And I have a library called Flipping J S, which I'm trying to release version 2 of it, which uses CSS variables to help manage that. Those, you know, mathematical operations, we should absolutely link them into the description of the circle. Okay, cool, well, I guess. In the next video we'll talk about something. How how to reason about animations, and what are the techniques to help us, like, reason about animations? Not to have them like chaotic if you have, like several animations, okay, thank you, thank you.

Play from 11:00