Uncaught ReferenceError: gasp is not defined

Résolu/Fermé
uncodenul - 24 mai 2022 à 20:34
 uncodenul - 24 mai 2022 à 20:41
Hello , j apprend sur plusieurs projet et la je voudrais utiliser des JS sur un site, j ai cette erreurs qui apparait , j ai compris que je dois définir gasp la seul chose c est que je ne sait pas comment, si quelqu un aurait la gentillesse de me dire quoi mettre et pourquoi ca serait superbe! ( j ai esseyé de me renseigné mais je ne trouve pas la solution) merci !
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 =gasp.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();
})


et si par tout hasard le probleme serait dans l html le voici

<!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>
        <div class="lignes">
            <div class="l1"></div>
            <div class="l2"></div>
         </div>

     <div class="container-first">
            <h1><span>test </span><span>en </span><span>sah </span><span>club</span></h1>
            <div class="container-btns">
               <button class="btn-first b1">Discover</button>
               <button class="btn-first b2">Contact</button>
            </div>
        </div>

        <img src="img/title.png" class="logo">
        


    <ul class="medias">
        <li class="bulle"><img src="img/guessrlogo.png" height="40" width="40" alt="img" class="logo-medias"></li>
        <li class="bulle"><img src="img/guessrlogo.png" height="40" width="40" alt="img" class="logo-medias"></li>
        <li class="bulle"><img src="img/guessrlogo.png" height="40" width="40" alt="img" class="logo-medias"></li>
        <li class="bulle"><img src="img/guessrlogo.png" height="40" width="40" alt="img" class="logo-medias"></li>
    </ul>








    <!--script used:-->
    <script src=anime1.js></script>
    <script src="Js\Name.js"></script>
    

</body>
</html> 




merci et bonne soirée a vous

1 réponse

UP, c est tout bete c est gsap et pas gasp ^^ mais si certain veulent ce cassé la tete voici des magnifique nouvel erreur toute rouge
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 Tween.render (gsap-core.js:2381:8)
at Timeline.render (gsap-core.js:1591:13)
at Timeline.render (gsap-core.js:1591:13)
at da (gsap-core.js:130:13)
at updateRoot (gsap-core.js:1920:4)
at gsap-core.js:860:30
at Array.forEach (<anonymous>)
0