FLIP Technique Solution

[00:00:00]
>> All right, so let's get to flipping this caption elements over here. Because we have the parent elements, at least through the use of the background pseudo elements smoothly translating from its first position to its last position, but not this inner elements over here. So when we look at the code, this is the final code.

[00:00:23]
So when we look at this code, we see that we're doing this specifically for the first rectangle. So specifically what we're doing is, we're getting the first rectangle, we're doing something that changes the layout. So I'll just label this. This is our first, well, do something, and then we're getting the last rectangle here, and then, we are inverting it.

[00:00:52]
So we're doing the inversion over here, and then we're doing the play. So we have all steps of flip over here first, last invert play but specific to this figure. And now we wanna do it for the caption. The easiest thing to do would be to replace a figure L with caption L over here, but we're developers so maybe we could find a better, more abstracted way to do this.

[00:01:18]
And so I am going to actually make a function here called flip. And so we're gonna provide it a couple of things. We're going to give it our function and so this is a function that we want to call when we're doing something. And so, I want the first rectangles or the first elements rather.

[00:01:42]
And so, I'm gonna call this first Els and the last elements which by defaults are going to be equal to the first elements. Okay, so now we are going to grab, so basically we're doing this flip technique in batch. So we're going to grab the first rectangles from each of the first elements.

[00:02:08]
So firstEls.map el and this is going to be el.getBoundingclients rectangle. And then, so that's our first step over here. Then we're gonna do something, and so this is our function over here. That's our do something step, and then we're going to request animation frame. And we're gonna start getting our last elements, sorry, our last rectangles.

[00:02:37]
So const lastRects = lastEls same thing.map el return el.getbaundingclientrect. Okay, so now for each one of these racks we are going to calculate the difference between all the deltas that we have over here. In fact, I could pretty much copy and paste all of this. So I'm just going to do this, And then lastRects.forEach and we're going to get the lastRect and the index of that Rects because we do need the first rectangle as well.

[00:03:26]
Equals firstRects I. And then we're going to calculate the inversion between the first rectangle and the last one. And then we're gonna get the elements as well. So const lastEL= lastELs, I. LastEl. Okay, so we have the first Rect, we have the last Rect we're calculating the delta x, y, width and height from each of the rectangles.

[00:04:06]
And then, we invert them. And after doing all that, We're going to request animation frame again, and for each of the elements so last Els.forEach. We are going to set the flip to play, so lastEl.data set.flip =play. And so now instead of duplicating this logic for both of these elements, all we have to do is, where we gonna do this on click, or we going to flip.

[00:04:49]
And we going pass in our function over here. This is what's going to cause the layout change, and then we going pass the elements that we wants to flip. So, that's going to be the figureEL and the captionEI. So figureEL captionEl. Now remember by defaults the last elements are going to be exactly the same, so we don't need to specify that.

[00:05:18]
Okay, so let's hope that this works. Now when we click here, Let's take a look. Okay we could see that this fig caption which is our caption elements, it is getting all of these attributes. It's getting the CSS variables, it's getting the data attribute. So now we have to jump into our CSS and actually animate it.

[00:05:41]
So, Because we're not animating the before of the previous one. Sorry, we're not animating the before of the caption, whereas we are doing it to the previous one. There's [LAUGH] a little bit of nasty styling that we have to do over here. And so what I have over here is another data attribute called data-flip-bg.

[00:06:07]
And so data-flip-bg what that's going to do, is it's going to say whichever elements have this data-flip-bg, like over here, these are the ones where I want the background to flip. And for the other ones, I just want you to flip the actual elements instead of the background pseudo elements.

[00:06:29]
So I know that was a mouthful, but we'll see how it works when we actually inspect it. So I'm gonna remove this and now we're gonna play. So now you could see and I'm gonna slow down the animation over here as well to 25%. That we are flipping both the parents elements, so that background elements, and the child elements.

[00:06:58]
And there's no skewing or stretching or morphing taking place over here because we're in meaning to separate elements. And so what's great about this is that you could individually control the different animation properties or transition properties of each element. So, for example, with a ui-caption over here, we could say that this should be transition I don't know, transition-duration, let's say an entire second.

[00:07:34]
So now, Interesting, hold on. Okay, so the reason that this isn't working right now is because we are doing a bunch of transitions over here and, This might be overriding it. Let me just double check real quick. Yeah, so this is going to overwrite that transition-duration. So let's just, we put that as important.

[00:08:08]
This is why specificity is interesting. All right so, let's get rid of that for now. And so now it's working together. So the solution over here is that you could specify individual transition properties for each one. So we could say that the transition over here should be transform at 0.3 seconds, you could also just give the individual properties.

[00:08:40]
And even use CSS variables to say, hey, we just want to pull this from some CSS variable instead of just overwriting it. So actually, this is a real problem that we're running into right now. And this is actually a really good opportunity to show you how CSS variables actually solve this problem.

[00:09:03]
So instead of saying transition-transform 0.3 seconds, we could just say transition-transform and give it a duration with a default of 0.3 seconds. And so now what we could do in that ui-caption is give the duration over here, of let's just say 1 second and so hopefully this works.

[00:09:26]
Okay, so now you could see that the duration between these two elements is completely different. And so this gives you some creative possibilities. Because now that each of these elements are individual, you could control the transition between each of them. You could give them different easings, different timings, do different properties, and things like that even different delays if you wants to.

[00:09:52]
So this is actually pretty fun. So one of the questions in the chat was, for flip to work can we say we need a function that will result in painting the node? We call that function and then in the next animation frame get the bounding rectangle for the new position.

[00:10:11]
[COUGH] I'm not sure that I understand the question fully, I think the question is more around that function that we call over here. So this, Function that we're setting up that dataset states, what should that do? So basically, this is the function that causes layouts to change. So, for example, if we're adding a class, removing a class, adding a data attribute, doing something where it's going to affect the position of different elements, that's the kind of function we want over here.

[00:10:53]
Otherwise, the flip technique doesn't really make any sense, because you're not capturing the exact moment in time where you could figure out what the first rectangle is, and what the last rectangle is. So, yeah, hopefully that answers that question. And the second question in flip, notice in the first position and then we painted to a new position, immediately inverted back to the first position using translate and scale.

[00:11:21]
And then we played the animation to the new position again. And because of this, we must use backwards and animation fill mode, did I get it right? So the great thing about the flip technique is it actually does not use keyframes, it doesn't use animation. Instead, because from our previous lesson where we talked about transitioning between states, this is doing exactly that.

[00:11:45]
But this time, the states are the ones that we defined here which is the invert state, and the play state. And we're using CSS transitions to make it rubberband back to its original position. There was another question. What will happen if there are other elements around this? And so what's going to happen is pretty much nothing.

[00:12:11]
And so the reason why is because this does not affect layouts. So when we animate this, all we're doing is transforming. So we're doing, yeah, we're doing a transform, and we're doing a scale. And so all of that is on the GPU. And again, these are the most performant animations you could do, because it's not going to affect layouts.

[00:12:34]
So in the comments, got it, no animation and flip. But but we do paint it to a new position immediately inverted back to the first position, by translate and scale, right? And yes, that's exactly right. So does everyone sort of understand what's going on with flip? Okay, so that was a lot.

[00:12:56]
Flip is a little complicated but it is a technique that you could use to get these really smooth layout animations. And so the best part is for pretty much most of the animations where you might want to use flip, just copy and paste this. Go back to the workshop, copy and paste the code, and just use it wherever.

[00:13:16]
In fact, it could be one file, just flip, do this, here's my first elements. Here's my last ones, make it go smooth. So you just have to copy this, and the resulting CSS which is these ten or so lines.