How to make use of it:

1. Install & download the ScrollMagic.

# NPM
$ npm install scrollmagic  --save

2. Import the JavaScript ScrollMagic.min.js and plugins of your selection.

<!-- Core -->
<script src="/path/to/ScrollMagic.min.js"></script>
<!-- Plugins -->
<script src="/path/to/plugins/animation.gsap.min.js"></script>
<script src="/path/to/plugins/animation.velocity.min.js"></script>
<script src="/path/to/plugins/debug.addIndicators.min.js"></script>
<script src="/path/to/plugins/jquery.ScrollMagic.min.js"></script>

3. Initialize the library on a controller component and outline scenes as follows.

var controller = new ScrollMagic.Controller(
    // optione here
);

var scene = new ScrollMagic.Scene()

controller.addScene(scene);

4. Possible options for the controller.

var controller = new ScrollMagic.Controller({

    // A selector, DOM object that references the primary container for scrolling.
    container: window,

    // Sets the scroll mode to vertical (`true`) or horizontal (`false`) scrolling.
    vertical: true,

    // These choices shall be handed to each Scene that's added to the controller utilizing the addScene methodology.
    globalSceneOptions: {},

    // Loglevel for debugging. Note that logging is disabled within the minified model of ScrollMagic.
    // `0` => silent
    // `1` => errors
    // `2` => errors, warnings
    // `3` => errors, warnings, debuginfo
    loglevel: 2,

    // Some modifications do not name occasions by default, like altering the container dimension or shifting a scene set off component.  
    // This interval polls these parameters to fireplace the mandatory occasions.  
    // If you do not use customized containers, set off parts or have static layouts, the place the positions of the set off parts do not change, you possibly can set this to Zero disable interval checking and enhance efficiency.
    refreshInterval: 100

});

5. options for the Scene.

var scene = new ScrollMagic.Scene()

6. API.

// Add one ore extra scene(s) to the controller.  
// his is the equal to Scene.addTo(controller).
controller.addScene(scene);
controller.addScene(new ScrollMagic.Scene());

// Remove one ore extra scene(s) from the controller.  
// This is the equal to Scene.remove().
controller.removeScene(scene);
controller.removeScene([scene, scene2, scene3]);

// Update one ore more scene(s) in accordance with the scroll place of the container.  
// This is the equal to Scene.replace().  
// The replace methodology calculates the scene's begin and finish place (primarily based on the set off component, set off hook, period and offset) and checks it in opposition to the present scroll place of the container.  
// It then updates the present scene state accordingly (or does nothing, if the state is already appropriate) – Pins shall be set to their appropriate place and tweens shall be up to date to their appropriate progress.  
// **Note:** This methodology will get referred to as consistently at any time when Controller detects a change. The solely software for you is for those who change one thing exterior of the realm of ScrollMagic, like shifting the set off or altering tween parameters._
controller.replaceScene(scene);
controller.replaceScene(scene, true); // replace the controller instantly
controller.replaceScene([scene1, scene2, scene3]);

// Updates the controller params and calls replaceScene on each scene, that's connected to the controller.  
// In most circumstances you'll not want this perform, as it's referred to as consistently, at any time when ScrollMagic detects a state change occasion, like resize or scroll.  
// The solely software for this methodology is when ScrollMagic fails to detect these occasions.  
// One software is with some exterior scroll libraries (like iScroll) that transfer an inner container to a damaging offset as an alternative of really scrolling. In this case the replace on the controller must be referred to as at any time when the kid container's place modifications.
// For this case there can even be the necessity to present a customized perform to calculate the right scroll place. See `Controller.scrollPos()` for particulars.
controller.replace();
controller.replace(true); // replace the controller instantly

// Scroll to a numeric scroll offset, a DOM component, the beginning of a scene or present an alternate methodology for scrolling.  
// For vertical controllers it is going to change the highest scroll offset and for horizontal purposes it is going to change the left offset.
controller.scrollTo(100);
controller.scrollTo("#anchor");
controller.scrollTo(scene);
controller.scrollTo(100, "my message");
controller.scrollTo(function (newScrollPos, callback) {
  // with callback
});

// **Get** the present scrollPosition or **Set** a brand new methodology to calculate it.  
// **GET**:
// When used as a getter this perform will return the present scroll place.  
// To get a cached worth use Controller.information("scrollPos"), which shall be up to date within the replace cycle.  
// For vertical controllers it is going to return the highest scroll offset and for horizontal purposes it is going to return the left offset.
// **SET**:
// When used as a setter this methodology prodes a solution to completely overwrite the controller's scroll place calculation.  
// A typical usecase is when the scroll place just isn't mirrored by the containers scrollTop or scrollLeft values, however for instance by the interior offset of a kid container.  
// Moving a baby container inside a mother or father is a generally used methodology for a number of scrolling frameworks, together with iScroll.  
// By offering an alternate calculation perform you can also make positive ScrollMagic receives the right scroll place.  
// Please additionally keep in mind that your perform ought to return y values for vertical scrolls an x for horizontals.
// get the present scroll Position
var scrollPos = controller.scrollPos();
// set a brand new scroll place calculation methodology
controller.scrollPos(perform () 
  return this.information("vertical") ? -mychildcontainer.y : -mychildcontainer.x
);

// Get all infos or one specifically in regards to the controller.
// returns the present scroll place (number)
var scrollPos = controller.information("scrollPos");
// returns all infos as an object
var infos = controller.info();

// **Get** or **Set** the present loglevel possibility value.
// get the present value
var loglevel = controller.loglevel();
// set a brand new value
controller.loglevel(3);

// **Get** or **Set** the present enabled state of the controller.  
// get the present value
var enabled = controller.enabled();
// disable the controller
controller.enabled(false);

// Destroy the Controller, all Scenes and every little thing.
// with out resetting the scenes
controller = controller.destroy();
// with scene reset
controller = controller.destroy(true);