Having some trouble with TimeLineMax animation - my console keeps showing an error: TimeLineMax is not defined. Can anyone assist me in fixing this issue? I've double-checked if the library was added properly, but still can't figure out what's causing the problem. Any tips or suggestions would be greatly appreciated.
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">
<!-- mobile menu -->
<!-- <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>