Transcript from the "Popmotion" Lesson
[00:00:00]
>> Brian Holt: So I'm gonna show you one more library here that we can tool around with. We're gonna just work on the same page to add a little bit of physics to our page. And luckily you're not gonna have to do much physics programing, they do it all for you.
[00:00:14]
There's one called Popmotion. I think if you just search for Popmotion JS. You're looking for popmotion.io and we're gonna use Pure down here.
>> Brian Holt: Okay, so click on Pure. And if you'd look here they'd have just a bunch of really cool animation demos for you, right?
>> Brian Holt: So like this is the one that we're actually gonna do, the Spring one.
[00:00:40]
So you can just like drag it around and it just kinda goes back to place.
>> Brian Holt: But you can see here all of this stuff they just have for you, they wrote the libraries that do all this kind of stuff. And you pretty much just have to copy and paste their code and it more or less works.
[00:00:58]
>> Brian Holt: So in this one you can like play catch with yourself with a ball. And you can see here there's not a lot of code to do that. This one you could make your own gallery like that, that has like more physics to it. Pretty fun stuff, right?
[00:01:16]
>> Brian Holt: Now, if i had to write this, this will take me forever, because in order to be able to write physics like this, it requires a decent amount of like math and all that kinda stuff. And that's not necessarily my expertise. So what I'm gonna do here is the first thing I'm gonna do is get started.
[00:01:33]
So they want you to install it through a build process. We're not gonna use the build process right now. This one, install Popmotion page. There we go. So if you're on Popmotion, on the home page, click the Get started up here.
>> Brian Holt: And then click the Install Popmotion.
[00:01:55]
And down here you should have this one, the script include right here.
>> Brian Holt: Okay, so you're just gonna copy and paste that. We're gonna put that, as long as you're above my-gallery, it doesn't matter if it comes before or after Swiper. It doesn’t have any CSS, so you don’t have to worry too much about that.
[00:02:24]
Okay, and so you all are right here right now listening to me, so you can use this link as is. If you're watching this video in the future, you might have to put @8.5.0 here. The only reason that you might have to do that is if they change this library between now, at this moment in time, and when you're watching the video.
[00:02:49]
The version might change, and how it works might change. So just to be safe you might wanna just drop in @8.5.0, that's just like the version of the code they're working on. Maybe on version 10 they're gonna change everything, I don't know, these things happen.
>> Brian Holt: Okay, so now we're gonna have, if we go back over to Swiper and refresh the page here.
[00:03:13]
I go into console. I now have a Popmotion object available on the global scope, that we can start doing some more animation-y kinda stuffs.
>> Brian Holt: So what I wanna do is I wanna make like a navigation header on my page here. And I wanna make it so that I have a little brand, like my personal brand, or like an emoji up there that people can drag around and have fun with, right?
[00:03:44]
So basically I wanna emulate,
>> Brian Holt: Go back to this. I wanna emulate this, right? I want this to be on my navigation, that people can play around with it.
>> Brian Holt: So let's go ahead and do that, let's go add the HTML for that. So above your swiper-container, here, we're gonna put a nav element.
[00:04:09]
You put your nav element there, I'm gonna call it main-nav, = main-nav.
>> Brian Holt: Okay, and then I'm gonna put my each h1, and the class here is gonna be like whatever brand I'm. Yeah, like it's the main brand of the page. For now I'm gonna put an emoji here.
[00:04:33]
So feel free to put whatever emoji you want to here. I am obviously going to put the dog emoji, because that's the most important emoji.
>> Brian Holt: It's science.
>> Brian Holt: Okay, so we have a dog emoji there, but you can put, again, whatever emoji you want to put there.
[00:04:54]
>> Brian Holt: We're gonna have to go modify our styles.css a little bit. So go to your styles down here at the bottom. We're gonna put body, padding 0, margin 0.
>> Brian Holt: By default HTML bodies have some margin and padding on, and so we just wanna to get rid of those.
[00:05:16]
And then .main-nav.
>> Brian Holt: We're just gonna give it like a nice little background color. I'm gonna make it black. You can make it whatever color you want. Color white, though that is not gonna make much of a difference, but that's fine. Margin 0, font-family, I guess that's not really important either, cuz I don't.
[00:05:43]
So if you're putting text on there instead of like an emoji, this would be important. So let's just go ahead and do it.
>> Brian Holt: And we'll just make the font Arial, cuz that's on most browsers. Padding 15 pixels, cuz we want it to be nice and big.
>> Brian Holt: Brand, we're gonna add, it's gonna be margin 0, font-size 50 pixels, cuz we want the emoji to be nice and large.
[00:06:20]
>> Brian Holt: And then we're gonna do cursor, grab. So it's gonna make it look grabbable, so people can know that they can click on it and grab it.
>> Brian Holt: Okay?
>> Brian Holt: So if you don't give this a z-index, it's going to be pulled behind other elements. So if we give it a z-index of basically anything, that means it won't be pulled in front, or it won't go behind other elements, it'll always stay on top.
[00:06:50]
And I'll show you what that looks like if you don't have it on there as well. But for now, just put it on there.
>> Brian Holt: Okay?
>> Brian Holt: So now, if we come back over here and look at it, we have a nice little brand here at the top.
[00:07:08]
Notice that it's got a little grab guy on it. It's not working yet, right? But we got a little dog header up there.