svgOrigin

[00:00:00]
>> Sarah Drasner: Here's the last thing that we're gonna cover which is svgOrigin. svgOrigin is super cool because look at this, I've got this cow jumping over the moon. I'm gonna throw it and he scares the little guy, right. My friends were making fun of me because they could do this better than I could.

[00:00:18]
So cow scares the little astronaut, and, of course, it's SVG so it works well on mobile too, and also that's draggable, so it's draggable and then it's 360. So I wanted the cow to jump over the moon and rotate around the moon. There didn't used to be SVG Origin in GreenSock, but now there is.

[00:00:45]
Now, SVG Origin, you can pick out two points inside the SVG and have everything rotate around that. So really, transform origin wouldn't allow me to do that, right, because SVG, I'm rotating around another piece of the SVG somewhere else. So you can pick any point inside the SVG and have things go around that thing, it's super cool.

[00:01:12]
Whoops. So instead of they don't have the x, y. So for the view box, it would be x, y, width and height. They don't have those points. They just find the point like x and y and we're gonna rotate everything around that point. So I found the midpoint of the moon and it's rotating around that.

[00:01:33]
>> Sarah Drasner: So if they didn't, man, the transform origin issues in those embeds is really crazy. So if that didn't exist, how was I trying to do it before it existed? Well, I thought I would make this long pole and take the cow and put it in a group with the long pole, and then make the fill transparent of that pole and then I would around this way.

[00:02:00]
But it was constantly firing. It was just like I did like a test like a hit test between these two things and was like, well, when they hit do this other thing, but it was like constantly firing and I'm like, there's a bug in GreenSock. No, there's not a big bug in GreenSock, what it thinks is happening and the reason why it's constantly firing, is that there is no diagonals in the DOM.

[00:02:25]
So this is the group, this is what the DOM sees. And that's the little head that it is trying to check against. So it is almost constantly over that head really. I'm thinking of it like this thing. What's going on? And then it wasn't until I put a border around the whole thing.

[00:02:46]
Go, okay that's what it's seeing. So that's what the DOM sees for that piece. And here's the problem with hit tests for SVG I kind of touched on this before but I didn't fully explain it with visuals. If I check the bounding box stroke of all of these shapes while they're turning that's what we get.

[00:03:09]
So all of these things are moving even the circle. Look at how weird that is. What? What is going on? That is so bizarre. But that diagonal is really the thing that like, caught me. So, you can see if you have that hit test and you have two stars, and you're trying to see if they hit each other, they'll hit each other way before it visually looks like they hit each other.

[00:03:33]
So that's why that overlap thing, that overlap threshold becomes really important. So if you do decide to make a game, which you should, then you can kind of check. There's probably no better way to really understand the DOM and everything inside of it than making a game in the browser.

[00:03:50]
It might seem like a funny task, but you have to dive into all of the kind of what the DOM sees and everything. So definitely play can be a really cool way of learning.