title: trouble with scrollmagic section wipe example
body: <p>Guys I'm using scrollmagic for its parallax section wipe parallax effect. I've been following the demo exactly as found <a href="http://janpaepke.github.io/ScrollMagic/examples/basic/section_wipes_natural.html" rel="nofollow">here</a> and nothing I try seems to work. It's driving me crazy I have been at this for hours. What am I leaving out here?</p>
  
  <p>Heres a <a href="http://jsfiddle.net/t31294wh/" rel="nofollow">jsfiddle</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body&gt;
      &lt;section class="panel blue"&gt;    
          &lt;b&gt;ONE&lt;/b&gt;
      &lt;/section&gt;
      &lt;section class="panel turqoise"&gt;
          &lt;b&gt;TWO&lt;/b&gt;
      &lt;/section&gt;
      &lt;section class="panel green"&gt;
          &lt;b&gt;THREE&lt;/b&gt;
      &lt;/section&gt;
      &lt;section class="panel bordeaux"&gt;
          &lt;b&gt;FOUR&lt;/b&gt;
      &lt;/section&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body, html {
      height: 100%
  }                   
  .panel {
  height: 100%;
  width: 100%;
  }
  .blue {
      background-color: #3883d8;
  }
  .green {
      background-color: #22d659;
  }
  .turqoise {
      background-color: #38ced7;
  }
  .bordeaux {
      background-color: #953543;
  }
  </code></pre>
  
  <p><strong>JavaScript/JQuery</strong></p>
  
  <pre><code>$(function () { // wait for document ready
      // init
      var controller = new ScrollMagic.Controller({
          globalSceneOptions: {
              triggerHook: 'onLeave'
          }
      });
  
      // get all slides
      var slides = document.querySelectorAll("section.panel");
  
      // create scene for every slide
      for (var i = 0; i &lt; slides.length; i++) {
          new ScrollMagic.Scene({
              triggerElement: slides[i]
          })
              .setPin(slides[i])
              .addIndicators() // add indicators (requires plugin)
          .addTo(controller);
      }
  });
  </code></pre>
  
  <p>Thanks for your assistance!</p>