Getting Started : How to use ScrollMagic

How does ScrollMagic work?

The principle design pattern of ScrollMagic is a controller[1] that has an arbirtary number of scenes[2] attached to it.

There is one controller for each scroll container. In most cases there is only one controller object and the scroll container is the browser window. But you can also use DIV elements for scrolling and even have multiple containers on your page. The controller also defines which direction should be scrolled (horizontal or vertical) and is responsible for keeping all scenes updated.

A scene defines what should happen when, meaning at which scroll position. It can trigger animations, pin an element, change element classes or anything else you might desire.

Defining the Controller

As mentioned above in most cases the scroll container is the browser window. To create a ScrollMagic controller with the default settings we use the main ScrollMagic.Controller() class.
We create a new instance of it and assign it to a variable, so we can reference it later:

var controller = new ScrollMagic.Controller();

That's it! Now for the more interesting part:

Defining Scenes

Scenes are created by using the ScrollMagic.Scene() class. A ScrollMagic.Scene defines where the controller should react and how.
Here we define a variable called “scene” and we'll create a new ScrollMagic.Scene() instance.

var scene =newScrollMagic.Scene();

Inside ScrollMagic.Scene we can place an object of associated properties and values that are made available according to the docs…
These options describe the behavior of our Scene and in order to figure out what value has what effect you can play around in the Scene Manipulation Example

Adding Scenes to Controller

In order to have the scenes react to the scrolling of the container we have to add our scene to the controller we defined at the very beginning…

var scene =newScrollMagic.Scene({
triggerElement:'#pinned-trigger1', // starting scene, when reaching this element
duration:400// pin the element for a total of 400px
})
.setPin('#pinned-element1'); // the element we want to pin// Add Scene to ScrollMagic Controllercontroller.addScene(scene);

If you desire multiple scenes at once you can pass them to the controller just as the example shows below: