Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Getting Started : First Steps
Getting all the Files
We will need the necessary files for ScrollMagic, GSAP and jQuery.
If you are using bower you should know how to download all the necessary files. Here you can download them manually:
Preparing the Project
We will assume an
index.html file in the root folder of our project.
The Download package of ScrollMagic also contains the full documentation and all examples.
The files that are relevant to us are located inside the
/js folder. These files are:
This is the main file for ScrollMagic. It is used during the development phase of your project, so it can give you helpful debugging information.
After we finished the development we can replace the main ScrollMagic file with this minified version. It is lighter and thus loads faster.
This file is needed to help you visualize where your scenes are triggered. For more information see Debugging
To get started you'll need to reference GSAP, jQuery and the ScrollMagic library in your HTML.
It has been common practice to add JS files just before the closing
<body> tag, so they don't block the loading of the rest of your page. If you prefer to have them in your
<head> section this would work just as well...
<script src="path/to/js/gsap/TweenMax.min.js"></script> <script src="path/to/js/jquery.min.js"></script> <!-- should be replaced with minified version when development is finished --> <script src="path/to/js/jquery.scrollmagic.js"></script> <!-- should be removed when development is finished --> <script src="path/to/js/jquery.scrollmagic.debug.js"></script> <script> // this is where our code will go </script> </body> </html>
Now we're ready to start! Continue with the Basics of ScrollMagic.