title: TimeLineMax is not defined and I don't really know why
body: <p>I am trying to use TimeLineMax animation and my console shows an error: TimeLineMax is not defined. Can you help please? I was trying to fix it but I don't know where is the error? Is the library added properly? I have no more ideas how to solve that problem... I would be really gratefull if someone told me the tip.</p>
  <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>const hero = document.querySelector('.t-header__hero');
  const slider = document.querySelector('.c-slider');
  const logo = document.querySelector('.t-header__logo');
  const hamburger = document.querySelector('.t-header__burger');
  const headline = document.querySelector('.t-header__headline');
  
  const tl = new TimeLineMax();
  tl.fromTo(hero, 1, {height: "0%"}, {height: "80%"});</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.t-header {
    section {
      display: flex;
      height: 80vh;
      justify-content: center;
      align-items: center;
    }
  
    &amp;__hero {
      height: 60%;
      width: 100%;
      position: relative;
  
      &amp;::after{
        content: "";
        background: $black;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0.3;
      }
  
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  
    &amp;__headline{
      position: absolute;
      top: 70%;
      left: 10%;
      font-size: $font-size-1;
      transform: translate(-20%, -100%);
      color: $white;
      z-index: 3;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;header class="t-header"&gt;
          &lt;nav class="c-nav"&gt;
              &lt;a class="t-header__logo" href="#"&gt;&lt;img src="#" alt="Logo"&gt;&lt;/a&gt;
              &lt;img class="t-header__burger" src="images/burger-menu.png" alt="burger menu"&gt;
              &lt;!-- menu mobilne --&gt;
              &lt;!-- &lt;div class="t-header__menu-mobile"&gt;
                      &lt;/div&gt; --&gt;
          &lt;/nav&gt;
  
          &lt;section&gt;
              &lt;div class="t-header__hero"&gt;
                  &lt;img src="images/mam-tor-5393685_1920.jpg" alt=""&gt;
                  &lt;h1 class="t-header__headline"&gt;Dream Big&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/section&gt;
      &lt;/header&gt;
  
      &lt;div class="c-slider"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>