0 - Setup
Before you get started, be sure to check out ScrollMagic’s demo page to see the variety of things you can do with it ! Changing CSS values, pinning and un-pinning, fading, rotating, the list goes on. As you’ll be able to see for yourself very soon, the possibilities are almost endless with ScrollMagic.
Ready ? Let’s get to it !
To get started, we’ll only create a sample html page and load the various scripts required to use and debug ScrollMagic.
First, we need our markup. We’ll keep it to the bare minimum (something that runs properly in our browser) :
<html>
<head>
</head>
<body>
</body>
</html>
Save this file anywhere you feel like it, I’d suggest in a nice folder on your desktop, and open it in your browser by double-clicking on it.
Later on you’ll probably use some command-line process like grunt to make your development more efficient, I’ll skip that part for now, so you can learn how to use ScrollMagic on its own, it’s up to you to adapt to your own process.
Later in this exercise we’ll also use the files from CDNs and rawgit.com, again, this isn’t production-ready and shouldn’t be considered as such.
So far, the page should be empty and show nothing and it’ll be the same by the end of this first lesson… But well, it’s the Setup, it makes sense right. It only takes a few seconds anyway !
Loading the dependencies
To run properly, ScrollMagic is based on several libraries. We need to request those before we request ScrollMagic and our own code itself. It’ll only take 30 secondes ! All the following lines of code will be added in the <head> of our HTML file.
Loading jQuery
We’ll use Google’s CDN version of jQuery :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
ScrollMagic seems to use jQuery 1.9+ But I don’t know yet if it’s compatible with jQuery 2+, I have to check and update this bit with the lastest compatible version of jQuery.
Loading TweenMax
TweenMax is a library by GreenSock from the GreenSock Animation Platform (refered to as GSAP). We’ll use that to create our animations, which we’ll then transmit to ScrollMagic so they’re executed at the right time or scroll position would be a more appropriate term.
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script>
Loading ScrollMagic
Now that we’ve loaded the dependencies, we can finally add ScrollMagic :
<script src="https://rawgit.com/janpaepke/ScrollMagic/master/js/jquery.scrollmagic.js"></script>
We’re using RawGit which is a free tool used to serve files hosted on github as static files, which the proper Content-Type (which Github doesn’t do). You don’t really need to understand that anyway, just know that we’re basically using the source code directly from ScrollMagic GitHub’s repo instead of downloading it locally.
Loading ScrollMagic’s debug tools
Because it can be a little tricky to understand how animations run, and why they sometimes don’t go as planned, ScrollMagic comes with a bunch of debug tools that come in handy when learning so we’ll put that in as well :
<script src="https://rawgit.com/janpaepke/ScrollMagic/master/js/jquery.scrollmagic.debug.js"></script>
That’s it ! We’re now ready to get coding, everything is setup !
Your HTML file should now look something like this :
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script>
<script src="https://rawgit.com/janpaepke/ScrollMagic/master/js/jquery.scrollmagic.js"></script>
<script src="https://rawgit.com/janpaepke/ScrollMagic/master/js/jquery.scrollmagic.debug.js"></script>
</head>
<body>
</body>
</html>
Expected result
Check out the demo page to make sure you did everything right if you have any doubts. Inspect the code and everything !
Going further
This is a pretty raw example and we haven’t done anything yet. Maybe you could add a title to your page or something it’s not much but you know… It’s the little things :)