title: Why does my ScrollMagic.JS set the height of the element to 0?
body: <p><strong>I'm trying to make something like in this example:</strong> <a href="http://scrollmagic.io/examples/advanced/section_wipes_manual.html" rel="nofollow noreferrer">Link: ScrollMagic Examples</a></p>
  
  <p>I can't get it to work. The <code>#pageContent</code> height is only <em>0</em> when <em>ScrollMagic.min.js</em> is included.</p>
  
  <p><a href="https://i.stack.imgur.com/Gmgpm.png" rel="nofollow noreferrer">Picture - Element: #pageContent in inspect</a></p>
  
  <p><strong>What I have tried:</strong></p>
  
  <ul>
  <li>Using to examples source code</li>
  <li>Removing my scripts</li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//Copied from ScrollMagic Examples
  $(function () { // wait for document ready
    // init
    var controller = new ScrollMagic.Controller();
  
    // define movement of panels
    var wipeAnimation = new TimelineMax()
    .fromTo("#pageSec1", 1, {x: "-100%"}, {x: "0%", ease: Linear.easeNone})
    .fromTo("#pageSec2", 1, {x:  "100%"}, {x: "0%", ease: Linear.easeNone})
    .fromTo("#pageSec3", 1, {y: "-100%"}, {y: "0%", ease: Linear.easeNone});
  
    // create scene to pin and link animation
    new ScrollMagic.Scene({
      triggerElement: "#pageContent",
      triggerHook: "onLeave",
      duration: "300%"           
    }).setPin("#pageContent")
      .setTween(wipeAnimation)
      .addIndicators()
      .addTo(controller);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
    font: normal 14px Arial;
  }
  #pinContainer {
   width: 100%;
   height: 100%;
   overflow: hidden;
  }
  section {
   height: 100%;
   width: 100%;
   position: absolute;
    padding: 15vh 20vw;
    background: white;
  }
  .space {
    height: 100vh;
    padding: 15vh 20vw;
    width: 100%;
    border-bottom: 1px solid #000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="space"&gt;Space&lt;/div&gt;
  
  &lt;div class="content" id="pageContent"&gt;
  
    &lt;section class="section-img" id="pageSec1"&gt;
      &lt;div class="section-content"&gt;
        &lt;div class="img-display"&gt;
          &lt;img src="../img/me.jpg" alt="About Me"&gt;
        &lt;/div&gt;
        &lt;div class="info"&gt;
          &lt;h2&gt;About Me&lt;/h2&gt;
          &lt;div class="text"&gt;&lt;/div&gt;
          &lt;a class="more" href="about.html"&gt;Read More&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  
    &lt;section class="section-card" id="pageSec2"&gt;
      &lt;div class="section-content"&gt;
        &lt;div class="info"&gt;
          &lt;h2&gt;My Work&lt;/h2&gt;
          &lt;a class="more"&gt;See All&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="card-content"&gt;
          &lt;div class="card"&gt;
            &lt;h4&gt;Company&lt;/h4&gt;
            &lt;h3&gt;Online Warehouse Status&lt;/h3&gt;
            &lt;hr&gt;
            &lt;div class="text"&gt;This is a dashboard program created to see the warehouse stock online. I have also made a user system and a reusable database system.&lt;/div&gt;
            &lt;a class="more"&gt;Read More&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="card"&gt;
            &lt;h4&gt;Hobby Project&lt;/h4&gt;
            &lt;h3&gt;Computer Builder&lt;/h3&gt;
            &lt;hr&gt;
            &lt;div class="text"&gt;This is a dashboard program created to see the warehouse stock online. I have also made a user system and a reusable database system.&lt;/div&gt;
            &lt;a class="more"&gt;Read More&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  
    &lt;section class="section-info" id="pageSec3"&gt;
      &lt;div class="section-content"&gt;
        &lt;div class="info"&gt;
          &lt;h2&gt;Contact Me&lt;/h2&gt;
          &lt;div class="info-box"&gt;
            &lt;div class="info-boxitem"&gt;
              &lt;h3&gt;Email&lt;/h3&gt;
              &lt;h4&gt;email@gmail.com&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="info-boxitem"&gt;
              &lt;h3&gt;Phone&lt;/h3&gt;
              &lt;h4&gt;+45 00 00 00 00&lt;/h4&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  
  &lt;/div&gt;
  &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>