FLIP Technique Q&A

[00:00:00]
>> So yeah, there's a lot here to learn from just this alone. But another reason too is, exactly for this reason. I don't know if you could see anything wrong here but personally, if you look at the animation text, it's a little bit weird. And again, we could go into our animations, And we could investigate, what's so weird about this if I could click it.

[00:00:28]
Okay, let me click it there we go. So notice over here it's not doing it, but if I click this, okay so, the problem is even worse there. You could see that the animation is actually being really, really shrunken. You see that text, it's being shrunken. So, this is not something that we want and so on the way down, it's also being stretched.

[00:00:59]
And so the reason for this is because we're doing a layout animation, on the parents itself. And so, because we're doing it on the parent, this stretching and transforming, is going to affect all the children as well. Thankfully there's actually a pretty simple fix to this. And so the fix is that, instead of applying these flip animations to the parent, we could apply it, to pseudo-elements.

[00:01:32]
So if I do this to the before, Then, hopefully, I get pretty much the same effects without the text changing. And so all that's left to do is actually use the same flip technique, for the text. All right so are there any questions on the flip technique and layout animations?

[00:02:01]
Yeah.
>> Can you go a little bit more into the request animation frame. I see that you have request animation frame function and then there's another request animation frame inside that function. Is that kind of operating like hey, this isn't the same scene and this will happen then that will happen?

[00:02:20]
What happens if that request animation frame is outside of that initial, call?
>> Well all right so let me show you exactly what's happening over here, let's say that this is your timeline, right? And that, here's one request animation frame, or sorry, here's one animation frame here's another one and, here's another one.

[00:02:46]
So all the changes that we're making, are actually happening, just ahead of time. So, where we're doing the setting up the styles and everything over here. And this is where we're doing the inversion of the x and the y position and the width and the height, right? So the browser, when it's doing transitions, it's reading between the animation frames.

[00:03:15]
So, I'm not sure if this is why you're asking but basically, it needs to have something over here. Let's say that this changed so that it knows hey, there's a difference between, what's calculated here. And what's calculated in this animation frame, so I could transition. Now if we do those in the same animation frame, you get this.

[00:03:36]
Which means the browser is only going to read this, and it's not really going to know that anything is changing. So that's why you basically have to have them in separate animation frames.
>> There's a person that asked, I don't see why the rect bounding box changes between, the first rect and the last rect.

[00:03:56]
>> Okay so, here's why at least in here, here's why it's changing. We have different styles, here let me show you, for collapsed and expanded. And so we could show that here, when we do expanded, you could see that the styles are completely different. And so the rects, the bounding clients rects which measures, the dimensions of this rect, that's what's changing, so, Yeah.