2.2 Controllers and Scenes

Hello and welcome back. In this lesson, I wanna talk about the two main components of the ScrollMagic library and that's controllers and scenes. Now a controller is nothing more than just a container for your scenes and a scene is where all the magic really happens in the ScrollMagic framework. So in a scene, you would define what elements in your HTML you want to, for example, pin in place. If you want to pin a certain animation in place and then have that animation take place over a certain range of scrolling, then you would define all of that, how that's gonna work inside your scene. Then defining that we're gonna discover in the next lesson is really really easy to do. We can either define that in terms of an offset as far as how many pixels of scrolling do we want to occur before this scene actually takes place. Or we can define it using a trigger element, so we can say once we scroll to a certain element, then we want to trigger a certain animation. So again there are three steps here and I'll highlight them very briefly. We're going to start over in the next lesson with them, but I wanna go ahead and show you. We're gonna create a controller first and you can call it whatever you want to. I'm just gonna call it controller so we'll say var controller and then in scroll magic, we're just gonna set this equal to a new ScrollMagic. With a capital S and a capital M, .Controller with a capital C, open and close parentheses, semi-colon to end your statement. So that's all we really need for our controller and then we can add any number of scenes to that controller. And once we attach them to that controller, then they will start working. So the way we would create a scene is we might create a variable called I don't know, let's call it scene one. And we would set this equal to a new scrollmagic.scene with a capital S. Now inside the parentheses for the scene, we're going to need an object that has a series of properties and values. And so in JavaScript we create an object using curly brackets. So inside the parenthesis we have curly brackets and I'm going to break those curly brackets up so that we can type in between those curly brackets. And then we would have something like offset equals 40. So after scrolling 40 pixels, then this scene would start animating or it would pin itself in place or whatever you define. And there are a number of other properties you can use here such as duration, which would tell ScrollMagic how long we want this scene to remain in place, how long we want that scene to last in terms of pixels of scrolling? So we could say 400 and that animation or if you decide to just pin an item in place that will stay pinned for 400 pixels of scrolling. Now just because we've created a controller in the scene, it doesn't mean that everything's working yet. We now have to attach the scene to the controller and there are a couple of ways to do that. One of the easiest ways is just to refer to your scene, which we call the scene1 and then we call the addTo method. So we say .addTo with a capital T and then inside the parentheses, we type in the name of the controller and we've now added that scene to the controller. So, in the next lesson, we're actually going to start over with this code here and we're going to actually make it work. We're going to pin an item in place once we get to a certain scroll position and again we'll talk about how to make that work in the next lesson. So thank you for watching and I'll see you then.