[Gsap] gsap not defined dans visual studio code

**Bravehe15** · 29/01/2024, 21h37

bonjour a tous voila je debute en js et j ai voulu essayé d utiliser une bibliotheque gsap et ce que je ne saisis pas c est que npm l a instalé j ai mes packages json sur l editeur et quand je lance le script grosse deception rien ne marche pourtant j ai bien mis les scripts dans l ordre et avant le body je suis passé aux vaidateurs html css et js et juste cette erreur dans la console gsap not defined .....
Auriez vous une idée de l episode que j ai raté lol merci voici le code c est juste un header avec un logo quidevrait s animer en fait

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="header">
        <div id="logo" src="">AS design</div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
    <script src="index.js"></script>
</body>
</html>

le css

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    background: linear-gradient(to right, #f4a261, #66b3ff); /* bleu opale */
    color: white;
    text-align: center;
    padding: 50px;
}
 
#logo {
    color: #6a097d;
    font-size: 2em;
    cursor:pointer;
}

le js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { gsap } from 'gsap';
 
document.addEventListener("DOMContentLoaded", function() {
    gsap.to("#logo", {
        duration: 5,
        x: 100,
        y: 100,
        repeat: -1,  // Répète l'animation indéfiniment
        yoyo: true,  // Fait revenir l'animation à son état initial
        ease: "power1.inOut"  // Applique une fonction d'assouplissement pour une transition plus douce
    });
});
 
gsap.to("body", {duration: 1, backgroundColor: "red"});

**NoSmoking** · 30/01/2024, 19h09

Bonjour,
soit tu utilises Gsap avec le cnd avec

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>

et dans ce cas supprime l'import de ton fichier JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
// OUT import { gsap } from 'gsap';
 
document.addEventListener("DOMContentLoaded", function() {

soit tu utilises les modules et dans ce cas supprime l'appel à la lib. et déclare ton script en tant que module

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
-->
<script src="index.js" type="module"></script>