 Hello and welcome to Supercharged. Now this is a kind of TLDW. Last week I did a live stream with Serma where we made some swipable cards. Now you probably recognize swipable cards from things like Google Now where you just kind of take a card and you dismiss it. And you can actually see what I've got on screen. This is what we ended up making. There you go you see. Dismiss it and all that kind of good stuff. Now the idea is if you've not got an hour to watch that live stream back, although if you can I would recommend it and you can find the link to that below. If you can't that's exactly what this is for. I want to step through the things that we learned the things that we did and just so you can get an insight into what actually went into it. So before we actually get started what I want to do is I want to step over to theory corner. Oh yeah theory love theory and what we can do in theory corner is discuss what we need to do. Join me. Welcome to theory corner. You can tell it's theory corner because there's some theory in a corner. Now this is what we have. We've got the cards. You can tell it's a card because it says card. The cards have will change transform on it. The idea I have here is that we want each card to be transformed around the screen and so we want to give each card its own layer. The compositor then can move those around with the help of the GPU. So long as we stick to transform opacity and we set will change we should be good. So we move the card as you touch and swipe but as you get across to this side we have this marker like 0.35. Now I picked that at random. You could pick a different number. 0.35. If you go past that point we basically say well this card is being dismissed so we slide it off to the side. The other thing that we're going to do is we're going to change the opacity. So the further you go across the lower the opacity in both directions. So that works there. Okay so we're going to put each card on its own layer and shift it side to side and fade it out. Let's go back to reality. What we're going to do here is we're going to step into the code so you can actually see bit by bit what we actually did. Here's the cards and what we do first of all is we basically create an array from the cards that we've got in the document. So we'd have to have some kind of code that adds or removes those cards later on but don't worry about that we'll just get on with what we've got here. The next thing to notice is that I've got these named functions on start, on move, on end and update. Now the first three are our input events and I choose to do it this way. What I do is I take a copy of it by calling dot bind on this and that takes it from the prototype into the actual instance but it does another thing for me as well. It means that it's bound to the instance so that in those functions when I say this dot whatever is actually applying to the instance and not to the target's event. No wait the event's target. One of those two. So it also does something else for me. It means that I can do add event listener and remove event listener and I can call it by name. I can say like this dot on start for example. You can see that down here in the add event listener. So I do add event listener for touch start, touch move, touch end, mouse down, mouse move and mouse up. All of them. Yay. And I can just basically say on start, on move, on end and so on. And if I wanted to do the remove event listeners I could do that and that would just work out fine for me. So we've got our event listeners and we have a bunch of variables here that are just sort of housekeeping things that we need to keep a track on. The other thing I do is I start the request animation frame where I busily sort of kind of do an update. Now if you're doing this in production I would suggest you don't do it quite like this. I would start the request animation frame when the user starts interacting and then when the animation's finished I would stop doing the request animation frame loop. But for the case of this just to keep things simple I just start it right at the start and I do kind of busy loop through. So what do we actually do in the on start, on move and on end event listeners? Wow. Saying event listeners over and over and over and over again. That's not confusing for me. No. What are we doing those? Well first in the on start the main thing is this. We basically take a marker for the start position of the interaction. Where does the user put their finger down on the screen and then we get that with page X. The other thing we do is we take a copy of that for the current position because as we move our finger we're going to update the current position so we know where we started and where we currently are and the difference is how far we want to transform the card. The other things that we do in this is we set the dragging card to say true but as we discussed in theory corner we set will change to transform. Now we can check that that actually works by going back to the code bringing up DevTools and in the rendering settings we're going to show layer borders. Anything that's got its own layer is going to go orange around its border. You ready? So when I click you can see that we immediately the card gets its own layer which is really cool. That means that we can transform and move it around cheaply like we discussed over there in the theory corner. Here's what we've got in the on move it's fairly straightforward all we do is we take the current position of the input and we basically said that's the current X. Now inside the update what we can do is we can say if they're dragging the card the screen X which is basically the position of the card on the screen is the current minus the start. That's basically how far they've moved and we can apply the transform to account for that. Now when the user stops interacting we actually have to make a decision. If you remember over in theory corner we said if the user is past that 0.35 marker so it's a sort of a zero to one range one being the full distance of the card zero being not at all. If they go past 0.35 which is what I've chosen but you could choose a different number what we want to say is they are dismissing the card and we do this by setting a target X which we use later on in the update and here we do screen X plus equals the target minus the current screen X over 4. What this is going to do is it's going to ease the card to that final position which will either be the center or it'll be off to the side depending on whether we decided that they've gone past the point of dismissal or not. Then there's some a little bit of tidy up that we do here. We basically normalize the drag distance and we use that to set the opacity so that the further across you get the more fadey the card is. So far so good. So the last little bit is what we do when you dismiss the card because what we want to do is we want to slide all the other cards into place and we do that with this animate other cards into position function. Let me show you what it looks like without that. Here's what it looks like without that. You see all the other cards just snap into place which you could do but doesn't look quite so nice. So what we need to do is we need to transform them down quickly to where they moved from which will be the height of the card plus the margin and you see that here. So we take every card that's after the current one which is this and we basically say translate yourself the height of a card plus 20 pixels which is the margin and again this is hard coded so you'd probably make this more dynamic in production and then we basically go from that to no transform at all and we use an easing of this cubic bezier and a duration of 150 milliseconds and all we need to do is just say card animate with those settings and then when you finished we say the animation is complete at which point we can just reset the target and call it a day and the animation is done. So without switched on you can see we get a nice smooth animation. So the only other thing to notice is when I'm dismissing the cards you can see that the other ones get their own layer temporarily. This is because we're using element animate and we're using a transform and that means that those get temporarily promoted to their own layer. Cool that means that it's also doing the same thing that we had over in Theory Corner. We're getting its own layer which means it happens nice and performantly and then when it's finished the browser automatically demotes them back and we're all good. So there you have it that's swipable cards if you've got time make sure you watch the live stream there's loads in there there's us finding and fixing bugs there's just chatting about the general approach all sorts of goodies in there hopefully you've enjoyed this little TLDW. Don't forget to subscribe to the channel and I will catch you on the flip side.