mon Javascript ne ce lance

bonjour , en premier lieu merci de prendre le temps de lire ce message je vous en suit très reconnaissant voici mon problème, récemment, pour avoir un réel rendu de ma page principal je l ai load avec un live server et plus sur mon dossier interne a mon pc, et voila un problème que je rencontre , mon script pour faire apparaitre une li ainsi que des mots ne se lance pas au demarage mais quand je clic sur la suite de mon site et fait un retour il se lance. Tout du moins je remarque qu il ne se lance pas au vue du " oppacity" qui reste a 0. chose que je n avais pas avant, je voudrais de ce fait savoir pourquoi^^DE plus j ai une erreur que je voudrais réglé et qui est peut etre lié a ce problème

CSSPlugin.js:985 Uncaught TypeError: Cannot read properties of undefined (reading 'style')
    at GSCache.getSetter [as set] (CSSPlugin.js:985:350)
    at PropTween._renderPlain [as r] (gsap-core.js:2560:39)
    at PropTween._renderPropTweens [as r] (gsap-core.js:2581:7)
    at _renderZeroDurationTween (gsap-core.js:342:8)
    at Tween.render (gsap-core.js:2322:4)
    at ca (gsap-core.js:122:11)
    at da (gsap-core.js:128:4)
    at updateRoot (gsap-core.js:1920:4)
    at gsap-core.js:860:30
    at Array.forEach (<anonymous>)

ceci est l erreur je ne sais pas si elle est liée vue qu elle est aussi présente le site quand je l avais sur mon disque mais on ne sait jamais. Pour plus d information je vous met le dit script et la page html ci dessous:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="title" href="Js/Name.js"/>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
    <title>Csguessr</title>
    
</head>
<body>   
    <header>
    </header>
    <nav> 
            <a href="Csguessr.html" ><img src="img/title.png" class="logo"> </a>

            <ul class="medias">
                <li class="bulle"><a href="https://discord.gg/Jb64QDp2hf" ><img src="img/Discord.png" height="40" width="40" alt="img" class="logo-medias"> </a> </li>
                <li class="bulle"><img src="img/wok.png" height="40" width="40" alt="img" class="logo-medias"></li>
                <li class="bulle"><img src="img/wok.png" height="40" width="40" alt="img" class="logo-medias"></li>
                <li class="bulle"><img src="img/wok.png" height="40" width="40" alt="img" class="logo-medias"></li>
            </ul>

    </nav>

    <main> 
        <div>
         <div class="lignes">
            <div class="l1"></div>
            <div class="l2"></div>             
          </div>

         <div class="container-first">
            <h1><span>GeT</span><span> The</span><span> Gamesense,</span></h1>
            <h1><span>improve</span><span> your </span><span> impact</span></h1>

            <div class="container-btns">
               <button class="btn-first b1"><a href="index.html"> START LEARNING</a></button>
               <button class="btn-first b2"><a href="https://discord.gg/Jb64QDp2hf">SUGGESTION</a></button>
            </div>
         </div>
        </div>
    </main>  




    








    <!--script used:-->
    <script src=Js/anime1.js></script>
    <script src="Js/Name.js"></script>
    <script src="https://unpkg.com/swup@latest/dist/swup.min.js"></script>
    <script src="Js/transition.js" ></script>
</body>
    

</html>

et le dis javascript qui cause probleme :

const titreSpans = document.querySelectorAll('h1 span');
const btns = document.querySelectorAll('.btn-first');
const logo = document.querySelector('.logo');
const medias = document.querySelectorAll('.bulle');
const l1 = document.querySelector('.l1');
const l2 = document.querySelector('.l2');


window.addEventListener('load', () => {

    const TL =gsap.timeline({paused: true});

    TL
    .staggerFrom(titreSpans, 1, {top: -50, opacity: 0, ease: "power2.out"}, 0.3)
    .staggerFrom(btns, 1, {opacity: 0, ease: "power2.out"}, 0.3, '-=1')
    .from(l1, 1, {width: 0, ease: "power2.out"}, '-=2')
    .from(l2, 1, {width: 0, ease: "power2.out"}, '-=2')
    .from(logo, 0.4, {transform: "scale(0)", ease: "power2.out"}, '-=2')
    .staggerFrom(medias, 1, {right: -200, ease: "power2.out"}, 0.3, '-=1');

    
    

    TL.play();
})

encore merci a vous pour votre aide

quand je start la page sur un live server

mon Javascript ne ce lance

Supprimer

Modérer

Signaler le message aux modérateurs