How rotate(0) fixed my transform animation | HTTP 203

Key Takeaways

what's that help how did you do it again maybe yeah [Music] I can only apologize for the gradient it looked great on my screen it sort of looks like toxic sewage now yeah in front of us um yeah my bad never mind but I want to talk about how rotate zero fixed by transform animation that's what's on the screen yeah so I was in a situation where I had a bunch of stuff on the screen and I wanted to zoom into one of them so which one pick one what should we do what should we zoom into oh the pile of poo right yep let's do the pile of poo uh by the way this wasn't set up so I just I just had a hunch because when I saw all of those I'm like I know which one I'm zooming into and I I had an 80 certainty that you would pick the same cool let's zoom into the Poo um so the way I did this was I used uh JavaScript like get bounding client wrecks to find the the Poo box it's funny isn't it the Poo box and the uh area that I wanted to fill with poo and so I had those two boxes there and I thought well scaling happens from the middle out um so the first thing I want to do is get those midpoints to be in the same place so I did the Translate There we go yeah um and then I need to do the scale I've got the the bounding rects uh like the poo is an eight for the size of the container on on the height there so I just need to scale that up yeah and it finally re-renders sharp there we go I wish it didn't do that anyway and that was uh that was my solution so I did it with the web animation API but this is how it would look uh as a CSS keyframes absolutely equivalent stuff feeling pretty pleased with myself um and then I ran the animation and it did this I was like it's not really what I wanted that wasn't it because it sort of feels like it zooms in and then swings to the boo um whereas I was kind of wanting more of an even an even thing and so I did some digging into how this all works uh I found out if I replace none with rotate 0 . the animations is now exactly what I wanted magic and that sort of blew my mind and I couldn't decide if that was just if I was like the last person to figure this out or whether that is something that's going to blow people's minds of why that works uh why are you on the scale do you know does that make sense to you as a thing like I'm kind of seeing where it comes from I think but by default it does make sense right we have to admit it yeah that's that's how I felt I felt like none rotate zero they're the same like really come on it's the they're both doing nothing so why does it drastically change the animation in this way uh and to find all of that out uh we need to explore how transform animations work in general um and eventually I'll get to why the rotate thing worked uh so let's say I want to transform this box from here to here uh it's also rotated there's a number of different ways we could do that um one way would be a nice nice straight line um and have it spin round as it's going down that line but no okay we're gonna do it fancy like I'm gonna do I'm gonna do this so so this this kind of Animation whoop you can on the web animate things on a path that is a feature we have but I'm not going to do that I'm just going to do it with pure transforms here's how I go about it uh like by default the rotate is going to happen around the the middle of the box so I need to move that Center Point essentially I could use a transform origin but I'm just going to do that would have been my guess transform origin straight down there exactly but I'm not going to do that I'm going to do it with individual transforms so I'm going to do a translate uh 450 on the negative uh off it goes there but the center point is still where it was so if I rotate 90 degrees we get that Arc um but it's in the wrong position now so do a counter translate pop it back where it is do you read transforms backwards like that that's I I don't know whether I'm unusual I always think of them I don't I I read them from from left to right I think most people do really yeah that's unusual I because I I always think of it I guess back to front like that because it like the first one if I read that forwards it's going to move down but then the rotate like I found it easier to think of it it's going up there and then it rotates around its new center point and then it goes down I don't know maybe that's maybe this is the sort of the problems I had setting up this animation in the first place but if we run that animation it does this and it's it's not done a straight line but it's not correct either now you can see it sort of undercuts the Curve uh and almost in some ways as well it feels like it rotates a bit before it even thinks about moving so like and then it moves okay to figure this out we need to look at this this is the circulation of Primitives and derived transform functions um an exciting bit of the spec which I didn't know until uh Robert Fleck we mentioned in a previous episode uh it's pointing me at this and I was like oh that's why it behaves like this okay and I'll so now I guess the rest of the episode I'm gonna explain what this all says we're gonna repeat what Rob said to you no what Rob said to me was here's a link and then I read this back and to be fair to him that's all I asked him to do uh this is what the browsers do accordingly to the spec we've got our from value and we've got our two value it will pad them out so they are the same length with kind of null things and then it will convert the format so that they're in the same kind of primitive so in this case it means turning the non-ins to translate y0 returning to rotate yeah and there we go we've got our zeros and then it interpolates each of the things independently so our 50 Mark there is is that great makes sense yeah and when you look at that it starts to become obvious why it was going wrong so we were relying on that uh the 450 value there to set our like center point of the animation uh down there but that's going to be interpolating from zero uh down to 450 as well as the rotation so what actually happened in our animation is the center point moved as well and you can see that is what was happening with that animation and that also explains why it appeared to not move at first because it was just going around the center point it is not until the center point so it sort of drags it um to yeah the final point I guess the solution in this case you want to put the 450s in there and that means they are you know going to interpolate from one value to the same value essentially not change they will be there from the start the points will be there from the start and yeah only the rotation exactly that only the rotation is going to change and it's really cool that the spec lets you do this and browsers let you do this because all of these are matrices under the hood but by letting you set up only particular values that are going to change that's actually a quite a complicated or a non-linear change in The Matrix uh which is a fun fun thing to say um like under the hood that the browser will do for you because if we we're going to take our our friend from Matrix Don Matrix and if I created on Matrix and to string it it gives us the the plain Matrix version back and if we compare the two matrices and we saw that these two things animated very differently but they kick out the same Matrix because in both cases it results in the Square not moving yeah because the one translate negates the other translate the top part so exactly so that mattered for our animation but if it crushes down to a matrix it's that that change is gone and so if if we take the Matrix from uh the the final point there you can see at the end of The Matrix is that the translate calls a next translation and a y translation and that six point blah blah I believe is the cosine of half of Pi I believe someone can correct me on that if it's not that whatever I I you know we're not here to do Matrix maths but if we set that animation up between the two it does this um and what you saw there was it's it's just going along the line and that's because we've lost information even though the matrixes are equivalent to what we had before we've lost that special thing the browser was doing pairing them up and interpreting The Primitives independently of one another so back to our poo Zoom uh here's where we're at it's doing this uh and this is the the transform we've got going on so let's have a look and see how the spec would handle that again it pads the the values out same length and then it gets them into the the same primitive so kill one translate zero zero exactly that uh and from that we can see what the midpoint would be and when I first thought about it like this I was like well that's sort of looks fine like those halfway points are halfway it's kind of looking as I I would expect here's the problem bringing out Dom Matrix again so here I've got my point zero zero and if I translate it by negative or negative one and then scale it uh we're gonna end up with a point that's at negative or negative one that that's all fine but if we scale it by eight the point is now at negative eight negative eight yeah and this is why I think of the translate of the the transforms in reverse order because you translate it and then scale it so the the scaling is applying to the to the the translated value and what this means is towards the start of the animation where the scale is kind of one each time the translate nudges by say a pixel that is going to be a pixel on the screen towards the end of the animation when the scale is eight it's going to be eight pixels eight pixels at a time so one nudge on the translate and now it's up to negative 16. so what we've done is kind of baked in and easing like you know easing into the animation just by ordering it like this and so that's what we were seeing here it does the zoom and then the transit and that's purely because it's it's ramping up the translate as the animation goes forward the solution swapsing them around so now it's scales and then the translate happens in my head afterwards because I read these things backwards but that makes sense to me so we've scaled up a point from zero zero it stays at zero zero because you know you scale something at zero it doesn't move um and then translate by minus one and if we nudge that translate up to buy a pixel minus two the result is only nudging by one and that gives you this this much more it's not being affected by the scale so in my animation swap those two around but the numbers are now wrong um because we've scaled it up by eight and that translate is not going to be enough to bring the Poo into the center multiplying by eight multiply them by eight there we go and I guess this is why this how this whole problem came about is I was ordering the transform in a way that was easy for me in terms of maths it's like well do the translate did scale um whereas in terms of making the animation work properly they needed to be in the other order yes I had to do a bit more maths but this is correct this will give us that animation like everything everything working out now I am wondering what about your rotate zero so let's talk about that yeah put it back where it was a rotate zero do you have a theory no good no that makes me feel better because this I like I knew this was going to happen but by the time I did it because I'd read the spec so like in total honestly I came up with this hack after the fact and the reason is back to this pads them out and now what it tries to do is go for each column and get them into the same format and it goes rotate scale these are two completely different things now it will get some of the things if you've got a translate X and A Translate Y it goes oh well translate it can communicate both of those things but rotating scale they don't have a common format except for the The Matrix and if it has to fall down to a matrix it does it for the whole rest of the transform so all these will be converted to matrices like this and in a matrix based animation uh we can see in the in the second row there the H is there that's a scale and then the translates are at the end there and they got multiplied by eight they got pre-multiplied by eight because when you're dealing with the matrices essentially the translates happen last uh conceptually last and this is the same if you use the individual uh transform properties like if you if you do a scale and Translate you would have to multiply the translate by the scale if if you were thinking in like non-scaled terms so yeah so as soon as you do that that was what caused it to fall back to matrices cool and I actually got the animation I wanted wow I wouldn't recommend that don't do that in your code um because it's a horrible hack it just you know happens to work if you are fully aware of how that stuff works so I would I would go for this solution I think do the extra maths do the multiplication yourself but yeah so this that was it that was my journey of like actually understanding how transform animations work and it turns out now I can actually make them animate how I want them awesome so the transform zero is like [Laughter]