title: Scroll Magic Parallax Problems
body: <p>I'm just trying to create a basic 2 layer parallax effect with scrollmagic on my index page that has a gigantic image and content below it. I looked the the documentation and source code several times but it doesn't seem to work and I don't know what I'm missing:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="row zero-padding parallaxParent" id="parallax1"&gt;
    &lt;div class="col-xs-12 zero-padding index--background" style="background-image: url('{{ backgroundimage.picture.url }}')"&gt;
      &lt;h1&gt;MACRO FOODS&lt;/h1&gt;
      &lt;h2&gt;Healthy made easy&lt;/h2&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div class="row zero-padding"&gt;
    &lt;div class="col-xs-12 index--title"&gt;
      &lt;p&gt; What is Macro Foods?&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row zero-padding index--blockwrap"&gt;
    &lt;div class="col-xs-12 col-md-8"&gt;
      &lt;p class="index--body"&gt;{{ whatismacrofoods.text }}
    &lt;/div&gt;
    &lt;div class="col-xs-12 col-md-4"&gt;
      &lt;img class="index--image" src="{{ imagesindex1.picture.url }}"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"&gt;&lt;/script&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"&gt;&lt;/script&gt;
  &lt;!--Custom--&gt;
  &lt;script src="{% static 'scripts/main.js' %}"&gt;&lt;/script&gt;
  &lt;script src="{% static 'scripts/parallax.js' %}"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.parallaxParent {
    height: 100vh;
    overflow: hidden;
  }
  
  .parrallaxParent &gt; * {
    height: 200%;
    position: relative;
    top: -100%;
  }
  </code></pre>
  
  <p>parallax.js: </p>
  
  <pre><code>//Parallax Scrollmagic
  var controller = new ScrollMagic.Controller({globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}});
  
  new ScrollMagic.Scene({triggerElement: "#parallax1", duration: "120%"})
  .setTween("#parallax1 &gt; div", {y: "80%", ease: Linear.easeNone})
  .addIndicators()
  .addTo(controller);
  
  new ScrollMagic.Scene({triggerElement: "#parallax2"})
  .setTween("#parallax2 &gt; div", {y: "80%", ease: Linear.easeNone})
  .addIndicators()
  .addTo(controller);
  
  new ScrollMagic.Scene({triggerElement: "#parallax3"})
  .setTween("#parallax3 &gt; div", {y: "80%", ease: Linear.easeNone})
  .addIndicators()
  .addTo(controller);
  </code></pre>