TimeLineMax is not defined and I don't really know why

Question

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.

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%"});

.t-header {
  section {
    display: flex;
    height: 80vh;
    justify-content: center;
    align-items: center;
  }

  &__hero {
    height: 60%;
    width: 100%;
    position: relative;

    &::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;
    }
  }

  &__headline{
    position: absolute;
    top: 70%;
    left: 10%;
    font-size: $font-size-1;
    transform: translate(-20%, -100%);
    color: $white;
    z-index: 3;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<header class="t-header">
        <nav class="c-nav">
            <a class="t-header__logo" href="#"><img src="#" alt="Logo"></a>
            <img class="t-header__burger" src="images/burger-menu.png" alt="burger menu">
            <!-- menu mobilne -->
            <!-- <div class="t-header__menu-mobile">
                    </div> -->
        </nav>

        <section>
            <div class="t-header__hero">
                <img src="images/mam-tor-5393685_1920.jpg" alt="">
                <h1 class="t-header__headline">Dream Big</h1>
            </div>
        </section>
    </header>

    <div class="c-slider"></div>

Answer 1

It's TimelineMax(), lowercase "l", not TimeLineMax().