1. Introduction

1.1 Introduction

Hello and welcome to getting started with ScrollMagic. My name is Craig Campbell and I will be your instructor for this course. In this short course, we're going to take a high level overview of the ScrollMagic JavaScript library, which allows us to create animations that are tied to the scroll bar, so that as you scroll up and down in the browser window you can control the playback of your animations. In this course, we'll be using the GreenSock animation platform to create our animations and you can learn more about GreenSock and some of our other Tuts+ courses. So once again, I want to thank you so much for watching. In the next lesson, we'll get started.

2. Scrollmagic Setup

2.1 Using ScrollMagic

Hello, and welcome back. In this lesson, I wanna show you where you can find more information about the ScrollMagic library. If you go to scrollmagic.io, that will take you to the main website for ScrollMagic. And I will include the link for that in your course notes. When you come to the main page, we can see a little bit of the ScrollMagic library in action if we start scrolling our Windows. So if I grab the scrollbar here and start moving it up and down, we can see an animation occurring that's tied to the position of the scroll bar. So, as we move it up and down, we can move that animation forwards and backwards. And that seems like something that would be really complicated to do, but the ScrollMagic library makes it very, very simple. So we can continue scrolling down here to see more information. And this is what I'm looking for here, this link to the documentation. So, we'll click on that, and it will take us to the documentation page. And this is where you wanna come if you want to find anything and everything that you can do with the ScrollMagic framework. So, the main links are gonna be up here at the very top. We have two main classes that we're gonna be talking about, controllers and scenes. And we'll get to that shortly. The next menu, we have some events, which we're not really gonna talk about much in this course. This is just a high-level overview. And we're gonna talk about creating some basic ScrollMagic interactions, events, and animations. But we're not really gonna be touching on any of these events here. And then we have our plug-ins. Now, this menu is important because we are gonna be using the GSAP plug-in. GSAP stands for GreenSock Animation Platform. It's a very powerful animation library written in JavaScript. And you can find courses on that at tuts+, and those go into a great amount of detail on how to use the GreenSock platform, mainly focusing on the TweenMax library. But we're gonna be creating a simple TweenMax animation towards the end of this course, which we will need this particular plug-in for. We'll need that animation.gsap.js file in addition to including the actual GreenSock platform itself. So that's where you can find more information about ScrollMagic. I'm gonna jump over to CodePen, which is where we're going to be entering in all of our code for this course, and you can find CodePen at codepen.io. And you can find this particular pen that we're looking at right now. You can find a link for that in your course notes for this lesson. So let's go ahead and take a quick look at this. Once you open that up, if you click on settings and then jump over to the JavaScript tab here, you can see all of the JavaScript libraries that we are including here. And we are using CDNs for these, were pointing to JavaScript files that exist elsewhere on the Internet, so you'll see that we're using JQuery. And you can add JQuery very easily in CodePen using this Quick-add dropdown. And you can see JQuery right there. If we scroll down to the bottom, you'll see there's also a GreenSock TweenMax item. So, those two are really easy to find. So we have JQuery and TweenMax. And then the other two here, ScrollMagic.min.js, and then this animation.gsap.min.js, both of those were found on the ScrollMagic website. You can find the links for those if you either go to the ScrollMagic website or just do a search for ScrollMagic CDN. And you can find those links, or you can just open up this particular codePen and find the links right there. So those are already included in our CodePen here. And in the next lesson, as we start talking about the ScrollMagic framework, we'll be using this same pen to get started. So thank you for watching, and I'll see you then.