scroll magic demo

quick demo for scroll magic with gsap timeline

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<div class="scrollContent">
  <style type="text/css">


  </style>
  <div id="pinContainer">
    <div class="box red" id="box1">
    </div>
    <div class="box blue" id="box2">
    </div>
    <div class="box green" id="box3">
    </div>
  </div>
  <script>


  </script>
</div>

CSS

.scrollContent {
  height: 2000px;
  width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background-color: #fafafa;
}

.box {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  position: absolute;
}

#pinContainer {
  padding-top: 400px;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

.blue {
  background-color: blue
}

.green {
  background-color: green;
}

.red {
  background-color: red
}

JavaScript

$(function() { // wait for document ready
  // init
  var controller = new ScrollMagic.Controller();
  var offsetCounter = 0;

  var moveBox1 = new ScrollMagic.Scene({
      triggerElement: '#pinContainer',
      triggerHook: 0,
      duration: 400,
      offset: 0
    })
    .setPin('#box1', {
      pushFollowers: false
    })
    //.addIndicators()
    .addTo(controller);

  var moveBox2 = new ScrollMagic.Scene({
      triggerElement: '#pinContainer',
      triggerHook: 0,
      duration: 250,
      offset: 0
    })
    .setPin('#box2', {
      pushFollowers: false
    })
    //.addIndicators()
    .addTo(controller);

  var moveBox3 = new ScrollMagic.Scene({
      triggerElement: '#pinContainer',
      triggerHook: 0,
      duration: 100,
      offset: 0
    })
    .setPin('#box3', {
      pushFollowers: false
    })
    //.addIndicators()
    .addTo(controller);

  var catchBox1 = new ScrollMagic.Scene({
      triggerElement: '#pinContainer',
      triggerHook: 0,
      duration: 1400,
      offset: 400
    })
    .setPin('#box1', {
      pushFollowers: false
    })
    //.addIndicators({name: "catch box 1"})
    .addTo(controller);

  var catchBox2 = new ScrollMagic.Scene({
      triggerElement: '#pinContainer',
      triggerHook: 0,
      duration: 1400,
      offset: 400
    })
    .setPin('#box2', {
      pushFollowers: false
    })
    //.addIndicators({name: "catch box 2"})
    .addTo(controller);

  var catchBox3 = new ScrollMagic.Scene({
      triggerElement: '#pinContainer',
      triggerHook: 0,
      duration: 1400,
      offset: 400
    })
    .setPin('#box3', {
      pushFollowers: false
    })
    //.addIndicators({name: "catch box 3"})
    .addTo(controller);

  /*  												$('.box').each(function(){
   												                              // Create a scene for each project
   												                              var myScene = new ScrollMagic.Scene({triggerElement: '#pinContainer', 
   												                             ...