Implementing Popmotion

[00:00:00]
>> Brian Holt: So now, I want to grab this off of pop motion over here, right? So if you click here on the fork on CodePen, this little button down here, it's gonna bring up a code pen, contain this,
>> Brian Holt: And it has a bunch of stuff in here, and you know what I'm gonna do?

[00:00:28]
I'm just gonna copy and paste all of it.
>> Brian Holt: So I'm gonna copy, go over to my gallery, underneath my swiper stuff, it could be above, too, doesn't matter. So this is gonna be the Navigation physics. This is all the stuff that they gave me from CodePen. And the only thing I'm gonna do up here is the ball, in the sense, it's not this ball right here.

[00:01:00]
We want that to be brand, right? Cuz we want the brand to have physics operate on it, not some sort of box. Now, this is called ball, and that's not really a good name for it. But for now, let's just leave it, cuz it's already set up and working.

[00:01:17]
So now, if I save that, we'll talk about the code here in a second, but, for now, it's enough to copy and paste this. They come back over here to swipe or gallery, and I refresh the page. Now, you can drag and drop this.
>> Speaker 2: Said that the z-index should keep it from going behind anything?

[00:01:40]
>> Brian Holt: Mm-hm, so if we go back over here, mind this thing in front of the pictures. So if I inspect element here. So I have the z-index right there. I just give it a value of ten. But if I take that off, notice I drag and drop it, it's gonna go behind the pictures here.

[00:02:02]
>> Brian Holt: Because it's higher on the page, it's implied be behind something.
>> Brian Holt: So that's why if I give the z-index, that should it, above it.
>> Brian Holt: So are you seeing this? This is working for you.
>> Brian Holt: So the key here, is I got everything off of the CodePen, and the only thing I changed about the CodePen, is I changed the query selector right there, to be dot brand new set of dot box, and then, you have to load the.

[00:02:35]
You have to have the nav up there obviously, right? And you have to have this script tag.
>> Brian Holt: And then, that should work.
>> Brian Holt: Okay, if you're still having issues, the next place to dive into would be the console to see what kind of errors you're getting. So I'm not getting any errors, but this is where you would find them.

[00:03:13]
>> Brian Holt: But then, this is a nice little Easter egg that you can show your people that are visiting your portfolio, or something like that, is you could make stuff randomly draggable. I always think those things are kind of fun.
>> Speaker 3: Stuff you commented out in the JavaScript is not meant to break it, Math and damping.

[00:03:32]
>> Brian Holt: I never even tried to commenting it.
>> Speaker 3: Iron common today, and it won't move for me.
>> Brian Holt: Make sure you have all your comma's, it's probably.
>> Speaker 3: Yep, right above, what does mass do?
>> Brian Holt: I have no idea.
>> Speaker 3: Okay.
>> Brian Holt: [LAUGH] My guess is that have to do something with the physics, right?

[00:04:01]
So if I make like a really heavy, and I make the physics interact differently.
>> Speaker 3: Yeah, there you got.
>> Brian Holt: Lucky guess.