ScrollMagic CLS Demo

by Louis Walch

HTML

<script src="https://rawgit.com/janpaepke/ScrollMagic/1678c394c0bed3e2d13ef7b61303d0180aa81855/scrollmagic/uncompressed/ScrollMagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/debug.addIndicators.js"></script>
<div class="spacer"></div>
<div class="panels">

  <div class="panel" id="one">One</div>
  <div class="panel" id="two">Two</div>
  <div class="panel" id="three">Three</div>
  <div class="panel" id="four">Four</div>

</div>
<div class="spacer"></div>

CSS

.spacer {
  height: 400px;
  width: 100px;
  background-color: yellow;
}
.panels {
  background-color: pink;
}
.panel {
  border: 1px solid red;
  font-size: 100px;
  height: 400px;
}

JavaScript

var controller = new ScrollMagic.Controller({
    container: '.panels',
    globalSceneOptions: {
        triggerHook: 'onLeave',
        duration: '100%'
    }
});

var scenes = [];

scenes[0] = new ScrollMagic.Scene({
        triggerElement: "#one"
    })
    .setPin('#one', {pushFollowers: false})
    .addIndicators()
    .addTo(controller);




/* // init


// create scenes

    
    
scenes[1] = new ScrollMagic.Scene({
        triggerElement: "#two"
    })
    .setPin('#two', {pushFollowers: false})
    .addIndicators()
    .addTo(ctrl);
    
    
scenes[2] = new ScrollMagic.Scene({
        triggerElement: "#three"
    })
    .setPin('#three', {pushFollowers: false})
    .addIndicators()
    .addTo(ctrl);
    
    
scenes[3] = new ScrollMagic.Scene({
        triggerElement: "#four"
    })
    .setPin('#four', {pushFollowers: false})
    .addIndicators()
    .addTo(ctrl);

*/