 Can you see my skin through this? I've realised that it's, no it's fine because it's it's like yeah nearly nearly new hoodie time. Just get those patches. For me it's the same, I have the same strategy of with friends as I do clothing it's it's you know I can't have a new one until one of them's gone. Okay. So if like clothes haul new piece of clothes friend dies I'm in the market for a new friend. You know I might go out. Am I your elbow patch? Yeah. Oh yeah sorry I didn't mean it to sound like that but it is actually what's happened isn't it. So Emma left me and now new friend every cloud. I'm honoured to be your elbow patch. So right okay after my episode of lots of code people will be sad about it but you're here to cheer us all up. We're free and we're going to chat about some animation stuff. Specifically animating the impossible. Oh that sounds difficult. Sounds impossible but it's but it's not because otherwise it would be a very short talk. That's it's the next slide just you can't. You can't done let's go home. So I guess we're going to start with like a really simple animation. All right. Just going to take a little look at some different types of animation that you kind of commonly find on the web. So really simple one we've got a button. I'm going to hover the button. It moved down a little bit and it changed colour. Down a little bit and changed colour. Yeah it did. So you know the colour change. Now it's changing the code. I hate it. The colour change is really nice and simple because you know you're just kind of changing a state. The button is staying exactly where it is. You're just changing like a property on hover. So that's nice and simple. And I believe we've recently started doing that entirely on the compositor. Colours. Yeah background colours. Background colours. That's really exciting. Not background images just colours. The chrome fact there for you. Thanks. I love it when you sprinkle chrome facts in. So here's another kind of more complex animation. So we've got a little header bar here and on scroll we want to make it smaller. Very nice. Yeah shall we do that again? Oh brilliant. Excellent. A nice scroll linked animation. Yeah so we've got scroll linked animations coming up. For now you can kind of use an animation library perhaps like GSEP using scroll trigger or you could you know calculate the offset top. And then we've got a few different things that are animating here. So it's a good use for like an animation library that has chained animations because you can kind of put them all together on a timeline. So we've got like the header gets a bit smaller and the inner moves up and the logo and the nav get a bit smaller. So we should say for people who maybe missed the intro in the last episode you work for GSEP. I do. I do. I work for Green Sock. And I'm really excited about this because I used to be a flash developer. Back in the day. Yeah so I used Green Sock back in the flash days and it's I can't think of another library that has like successfully made that leap that has been around for that long still doing the thing it does successfully across those two platforms. Yeah it's been around for a long time. We actually still have like ActionScript forum. Really? It's very occasionally someone will comment and it's like a bit of a blast. There's a big light alarm go off. We need a flash contractor. Yeah I wasn't around in the flash days. I'm not that old. Shut up. So here's like a little bit more complicated. We've got the dreaded list reordering. So we're kind of shuffling things actually about in the DOM and often with list reordering you might be adding items into the DOM or taking items out of the DOM and that's very difficult to animate between because you've got two completely different states. Because these have layout as well right? Yeah. So yeah if you merely just rearrange them it's just they're just going to pop into place. Yeah. So how does that happen smoothly because also I guess if you did just animate them around then that's bad for accessibility because now they're visually in a different order but they're not semantically in a different order. Yeah like animating you know changing the flex order is quite bad for accessibility. Of course. So yeah and also if you're going to add an item into the DOM it's just going to flash into existence if you take it out, flash out of existence. So it's a tricky thing to solve. Is this a masonry layout? Similarly yeah masonry layouts. Like things on the web are complicated because things move around. We have like responsive screens. You have content that's getting pulled in dynamically. You don't necessarily know where an element is when it gets clicked on. So doing something like this where you click on an element and it expands out into a full screen kind of image. It's actually quite tricky and I think that a lot of people would try and approach it maybe like this with like animate the width and height. So the idea was this is like a kind of modal thing so it's yeah even if you scroll the background this is going to stay. Yeah fixing the view right okay. But then you're animating between a position relative element and a position fixed element. You're pulling the element out of the grid so then how does the rest of the grid react because now there's a space. Because if you just resized it where it was you'll have all the problems with like if you have any overflow hidden or scroll or something in the way yeah I guess you need to pop it out of there put it somewhere else. Yeah and it's going to cause reflows and all sorts of all sorts of unwanted things. So this would be what I think a lot of people would attempt to do transitioning width and height and that's going to be affecting layout. Do you want to tell us about browser things? Okay these are three things which happen or sometimes only one of them happens. Like you either end up with composite, paint and composite or layout, paint and composite depending on how much of what particular things you change. So yeah as you say width is going to do the layout thing. Yeah so ideally we just want to be animating things on the composite side of the spectrum and then we're going to get buttery smooth animations. So ideally what we'd want to do with this little modal is to transition just the transforms. Yes because then that can all just happen on the compositor and happen all in the different thread and JavaScript can't do bad things to the animation. Yeah all right. So how do we do this? So we're going to talk about the flip animation technique. Oh yeah excellent that's fine I'm okay with it. Okay so flip. Do you have a slide with the word flip on at any point? I don't actually. Okay FLIP right and this is the technique and the person who came up with that name is Paul Lewis formally of this show and I hate it as a term I hate it for a number of reasons I hate it because he clearly came up with the name FLIP and then tried to figure out what it stood for which is first, last, invert and play. No one calls an animation first and last it's start and end but I guess that doesn't spell flip but the main problem I have with it the invert is no is that people remember it and reach it still and that he has a legacy and I don't and he just did it in the worst possible way but it's like it's I'm otherwise I'm over it it's fine. It's a handy mnemonic. Okay what would you call it? Not allowed to swear on the show. So anyway the key thing in this is get bounding client ret. A lovely Microsoft API. This is something that they threw in to the platform not as bad old days of IE they threw this in didn't standardize it but it's it's a great API it has since been standardized and it's an old one. I don't like it as much as the SVG version because the SVG version sounds more fun because just get get BB box get BB box yeah which sounds so much more fun than get bounding client rest. Little Star Wars robot isn't it? Yeah get BB box. Oh that's much nicer. It's very cute but anyway even if it doesn't have such a good name it does the same thing so it gives you the coordinates of an element in relation to the viewport so you can get like the top and bottom and the left and right position and the width and height so this is the key to kind of figuring out where our elements are and where they end up. And is it yes relative to the viewport relative to the viewport yeah. So to go back to the mnemonic that you love so much. Love it, favorite, great. First up. Start. Start. Yeah we're going to measure the initial position of the element and this is very handy to do like on user interaction so like when the user clicks because then you know that it's correct because you know on load you might have moved things around a little bit dynamic content might have been added so it's not you're not necessarily going to know where the element is so this is really handy to do this like on user interaction. And that should be a quick operation as well because the browser knows where it is already and as long as you make this called before changing any styles or anything it's just returning you information it already has. Yeah so we're going to check where the element is. End. And end. We're going to check where it ends up. Last up. Last up. So we're going to check where the element lasts up and this is before it's actually painted it to the screen so we're actually putting the element in its final position and this could be re-parenting it in the DOM. Could be all sorts of things like adding a different class and then we're going to measure where it lasts up. And then we're going to do invert. I'm trying to do this right seriously. So we're going to invert it and we're inverting it by adding some transforms so it looks like it's in the original place like it looks like it hasn't moved at all by this point so the user's clicked on it nothing's happened as far as they're concerned but actually we've put it in its new position and then applied some transforms to put it back visually in the original place and then play is removing you find who played that skill. Play is removing these offsets and then it animates into its final resting place. And that will be done with like CSS animation or a transition something like that. Yeah it could be done with CSS animation with a transition with the JavaScript animation library like yeah. So it's easiest to see if you actually kind of look at it happening. I love this it feels like lifting up the magician's curtain a little bit. So we've got the box it's in the header and then we've got a main element here and we're just going to do the first last and invert so we clicked on it and you can see it's in the it's in there but it's magic. It really feels like you shouldn't be able to like see behind this bit like lifting the magician's curtain definitely. So and then the last bit is play so if we add the play call in then it moves it into its final position and back again. We could just do that for ages. I do think like one of the things I've come to realize with animations is things are much easier if you rather than animate to something if you're animating from something because then in the final state it's not like I've done lots of animations where I've maybe like animated the whip to a position but then you end up with like an inline style with the width there. It seems much easier to have like the you know the destination width and all that setup and then just animate it from something else and it also means if you're using the web animation API you don't have to mess around with fill with like fill forwards or fill backwards which as far as I can tell just mess everything up when you use them so this model avoids that. Yeah gsep have been from tweens as well which like immediately render the initial positions. Oh nice. You get to the page so that's really handy. So yeah how do we do this with code? Big wall of code. Fun stuff. So our first it was start we're gonna get the bounding client rex and then this is lost. We're just gonna switch up something in the DOM, change a class or re-parent something and then get the new positions. So this will probably do a synchronous layout at that point and there's a lot of performance advice that would maybe say that this is a really bad thing. I think generally as long as you're only doing one then it's fine. So if you were animating two things at once here. Or batch them. Yeah exactly. So it's doing it at the same time. Yes so if you were animating two things you would pick up the two firsts, do the two switch it up and then do the two lasts and then you're only doing that synchronous layout once. Yeah I'm gonna mention Paul. I'm all right with this one. He mentioned that there's about a hundred milliseconds. A thousand milliseconds? Some number of milliseconds after someone's done an interaction where they don't actually notice what's happening. So you can kind of use that time to to do the calculations. Yeah between yeah about as long as it's less than 300 really. And even yeah if you need to do something like a network request then make sure you're showing a spinner or something or just just kind of have the thing flash. So you know it said yes we heard that click and then you've got then your second to do other stuff. Yeah so then we're going to get the delta values. So this is just a tiny bit of maths it's just getting the difference between the first and last position. And then we're just using CSS transitions here. So we're adding the x and y delta into a transform and then we're doing the play bit. Nice. So this is using request animation frame and this is just saying like give us a little just like a tick just like a little moment before we animate just to make sure that you know everything's in the right place. And then of course you could use like a JavaScript animation library to do the animation bit. That's also valid. We actually have a flip plugin. So if you wanted green sock to just handle all of it for you you can use the flip plugin. And this kind of handles a lot of the edge cases with flip. So flip doing it in like vanilla JavaScript. If you're doing simple things like we just went through it's great but if you get into nested elements that are all flipping and then you've got to calculate offsets I think David called it flip flop. When you have nested elements I can't remember what it stands for but that's like a little bit more complicated. So with the flip plugin you can look for different properties that are changing as well and animate between them and also deal with nested offsets. Yeah one of the things that that'll solve I imagine is well I know in my slide framework that I use in these episodes I've got a little scale to fit the screen. And that was all great and going well until I needed to do something like this and I used get bounding client rect but I wanted to know the position relative to one of the parent slide but because that was then a transform within a transform it all broke. I kind of actually wanted to know like I want the transform relative to another element and I imagine that's exactly what this kind of thing is just solving for you. Yeah and other little things like animating within a grid or a flip flex layout. So pulling out the elements and changing them to position absolute while they're animating and then putting them back in their positions. So it's just like a lot of magic behind the scenes. So grab the state, do your DOM changes just like normal and then use a flip from to animate from the state. Nice and easy. Yeah and then you can do stuff like this really nice and easy. So yeah flip. That's really nice. Animating the impossible. And it's now possible. It's now possible.