<section id="one">
  <div class=“inner”>
    <h1>ScrollMagic Tutorial</h1>
    <p>Learn how to <strong>pin elements</strong>.</p>
  </div>
</section>
<section id="two">
  <div class=“inner”>
    <h1>ScrollMagic Tutorial</h1>
    <p>Learn how to create a <strong>ScrollMagic scene</strong>.</p>
  </div>
</section>
<section id="three">
  <div class=“inner”>
    <h1>ScrollMagic Tutorial</h1>
    <p>Learn how to customize debug <strong>indicators</strong>.</p>
  </div>
</section>
<section id="four">
  <div class=“inner”>
    <h1>ScrollMagic Tutorial</h1>
    <p>Learn how to toggle classes using <strong>setClassToggle</strong>.</p>
  </div>
</section>

$blue: #0089cd;
$white: #ffffff;
html, body {
    height: 100%;
    margin: 0;
}
h1 {
    padding: 20% 0 0 0;
    margin: 0;
    text-align: center;
    font-size: 20px;
}
p {
    text-align: center;
    color: transparentize($white, 0.5);
}
strong {
    color: #fff;
}
section {
    height: 100%;
    color: white;
    position: relative;
    text-align: center;
    .inner {
        margin: 0 auto;
        max-width: 85%;
    }
}
section#one { background-color: $blue; }
section#two { background-color: darken($blue, 10%); }
section#three { background-color: lighten($blue, 5%); }
section#four { 
  background-color:  darken($blue, 10%);  
  transition: all 0.4s linear;
  &.is-active {
    background-color: #222222;
  } 
}

// Init ScrollMagic
var ctrl = new ScrollMagic.Controller({
  globalSceneOptions: {
    triggerHook: 'onLeave'
  }
});

// Create scene
$("section").each(function() {

  var name = $(this).attr('id');
  
  new ScrollMagic.Scene({
    triggerElement: this
  })
  .setPin(this)
  .addIndicators({
    colorStart: "rgba(255,255,255,0.5)",
    colorEnd: "rgba(255,255,255,0.5)", 
    colorTrigger : "rgba(255,255,255,1)",
    name:name
	})
  .loglevel(3)
  .addTo(ctrl);
 
});

// Get window height
var wh = window.innerHeight;
 
new ScrollMagic.Scene({
  offset: wh*3
})
.setClassToggle("section#four", "is-active")
.addTo(ctrl);