Cours 9¶

Message de Françoise ¶

Changement de plan

Intelligence Artificielle

Bonjour à tous, changement de plan pour les licences. Vous pourrez utiliser les licences de Midjourney et de Runway uniquement au collège. Je vais changer les mots de passe. Donc pour votre moodboard, vous pouvez utiliser des images libres de droit. Au prochain cours, vous aurez du temps pour utiliser Midjourdney.

Bootcamp JS¶

Retour sur la partie JavaScript de l'examen¶

Les étapes à suivre pour compléter l'exercice :

On ajoute des variables qui nous servent à compter.
On fait juste un fruit pour commencer
On ajoute une fonction pour les tâches répétitives (incrémentation du total et validation du clique de chaque fruit)
Finalement, on copie/colle l'eventListener pour chaque fruit.

GSAP¶

GSAP (GreenSock Animation Platform) est une bibliothèque JavaScript pour créer des animations web. Elle est utilisée pour créer des animations complexes et interactives¹.

Installation¶

<head>
  <!-- ... -->
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js" defer></script>
  <script src="path/to/your/script.js" defer></script>
</head>

Documentation officielle pour la version 3

CDN : Content Delivery Network

Il est recommandé d’utiliser des fichiers CDN, car ils sont mis en cache et se chargent rapidement. Avec des millions de sites utilisant GSAP, il est probable que vos visiteurs aient déjà la bibliothèque en cache, ce qui réduit la bande passante et accélère le chargement.

Qu’est-ce qu’on peut animer ?¶

GSAP permet d’animer une vaste gamme de propriétés CSS. Voici les types de propriétés fréquemment animées :

Positionnement : Propriétés comme x, y, left, right, top, bottom permettent des translations sur l’écran.
Espacement : Les marges (margin) et les espacements internes (padding) d’un élément peuvent être animés.
Dimensions : Vous pouvez modifier la largeur (width) et la hauteur (height) d’un élément pour créer des effets de redimensionnement fluides.
Opacité : L’animation de l’opacity permet de créer des effets de fondu, allant de 0 (0% visible) à 1 (100% visible).
Couleurs : GSAP peut animer les propriétés de couleurs, comme background-color et color, permettant des transitions en douceur entre différentes teintes.
Typographie : Les propriétés de texte comme la taille de police (font-size), l’espacement des lettres (letter-spacing) ou encore la couleur du texte peuvent être animées.
Transformations : GSAP prend en charge les transformations CSS comme :
- Échelle (scale) : Agrandir ou réduire la taille d’un élément.
- Rotation (rotate) : Faire tourner un élément sur son axe.
- Inclinaison (skew) : Modifier l’orientation d’un élément.

Comment les animations fonctionnent-elles ?¶

Toutes ces propriétés sont animées via des interpolations (ou tweens). GSAP modifie progressivement les valeurs de départ à destination en fonction d’une durée définie.

Pour rendre les transitions plus naturelles, vous pouvez appliquer des fonctions d’assouplissement (easing) qui contrôlent la vitesse du changement au cours de l’animation.

Syntaxe¶

La syntaxe des animations avec GSAP est extrêmement simple. En résumé, vous appelez une fonction (ex.: .to()), spécifiez un élément à animer via un sélecteur CSS (ex.: ".etoiles"), puis définissez les paramètres de l’animation dans un objet (ex.: x: 100,).

to()¶

Crée une animation où les propriétés de l’élément évoluent vers les valeurs spécifiées.

Dans l'exemple ci-dessous, l'animation s'effectue sur la position x du rond.

Syntaxe

gsap.to("selecteur", {
  // configurations
  // propriété: valeur
});

from()¶

Crée une animation où les propriétés de l’élément commencent à une certaine valeur, puis évoluent vers leur état final (tel qu’il est dans le DOM).

Dans l'exemple ci-dessous, l'animation s'effectue sur la position x du rond.

Syntaxe

gsap.from("selecteur", {
  // configurations
  // propriété: valeur
});

fromTo()¶

Permet de définir à la fois les valeurs de départ et d’arrivée d’une animation, offrant ainsi un contrôle total sur le processus.

Dans l'exemple ci-dessous, l'animation s'effectue sur la position x, y, puis sur la rotation de la barre.

Syntaxe

gsap.fromTo("selecteur", {
  // configurations from
}, {
  // configurations to
  // propriété: valeur
});

set()¶

Initialise immédiatement les propriétés spécifiées des éléments ciblés sans animation.

C’est essentiellement un to(), mais qui se produit instantanément .

Syntaxe

gsap.set("selecteur", {
  // configurations
  // propriété: valeur
});

Configurations¶

sélecteur : Le sélecteur CSS qui sélectionne un ou plusieurs éléments sur lesquels l’animation s’appliquera. Par exemple, #monElement pour un ID ou .classeXYZ pour une classe.
configurations : Les options d’animation spécifiques que GSAP va utiliser (ex.: duration, ease).
Propriétés CSS : Les propriétés CSS à animer, comme x, opacity, etc.

Propriétés CSS¶

x : Représente un déplacement sur l’axe horizontal en pixels par défaut.
y : Représente un déplacement sur l’axe vertical en pixels.
rotation : Permet de faire pivoter l’élément autour de son centre. Les valeurs sont en degrés.
scale : Modifie la taille de l’élément en appliquant un facteur de mise à l’échelle.
opacity : Gère la transparence de l’élément, de 0 (invisible) à 1 (entièrement visible).
backgroundColor : Change la couleur de fond de l’élément.
borderRadius : Modifie le rayon des bordures, permettant des coins arrondis.
skewX et skewY : Inclinent l’élément selon les axes X et Y.
scaleX et scaleY : Changent respectivement la mise à l’échelle horizontale et verticale.

Info

Les valeurs sous forme de nombre (qui ne sont pas entre guillemets), ex: 400, sont interprétées en pixel. Les valeurs entre guillemets, ex '400%', peuvent spécifier une unité de mesure différente, comme dans le cas précédent où un pourcentage a été utilisé (%).

Configurations GSAP¶

duration : Durée de l’animation en secondes.
ease : Fonction d’assouplissement qui définit la vitesse de l’animation tout au long de sa durée (ex : "power2.inOut" pour une accélération/décélération progressive).
repeat : Nombre de fois que l’animation se répète.
yoyo : Si défini sur true, l’animation revient à son état initial après chaque répétition, créant un effet de va-et-vient.
delay : Tout comme la propriété animation-delay en CSS, la propriété delay de GSAP permet de spécifier un délai d'attente avant de démarrer une animation.
repeatDelay : Délai entre chaque répétition.
stagger : Similaire à Delay, Stagger fait en sorte qu'un groupe d'éléments ayant tous la même animation soient décalés.
paused : Si défini sur true, l’animation commence en pause.

Callbacks ¶

onStart : Fonction callback appelée lorsque l’animation démarre.
onUpdate : Fonction callback appelée à chaque mise à jour de l’animation (frame).
onComplete : Fonction callback appelée lorsque l’animation est terminée.
onRepeat : Fonction callback appelée après chaque répétition de l’animation.

Exemple complet¶

Voici un exemple d’animation GSAP avec plusieurs propriétés CSS et configurations :

HTML

<div class="dot"></div>

CSS

.dot {
  width: 10px;
  height: 10px;
  background-color: #ffffff;
  position: absolute;
  top: 50%;
  left: 100px;
  border-radius: 100%;
}

JavaScript

const largeurFenetre = window.innerWidth;
gsap.to(".dot", {
  // Propriétés css
  x: largeurFenetre - 200 - 10,
  rotation: 180,
  opacity: 0.25,
  backgroundColor: "#2fb170",
  borderRadius: "12.5%",
  skewY: 45,
  scale: 10,

  // Configurations
  duration: 10,
  ease: "power2.inOut",
  stagger: 0.2,
  delay: 0.5,
  repeat: -1,
  yoyo: true,

  // Callbacks
  onStart: () => {
    console.log("Go!");
  }
});

Timeline¶

Quand on utilise timeline en GSAP, chaque animation commence après la fin de la précédente.

gsap.timeline()
  .to("#box", { x: 100, duration: 1 }) // Démarre à 0 seconde
  .to("#box", { rotation: 360, duration: 1 }) // Démarre après la fin de la première animation
  .to("#box", { y: 100, duration: 1 }); // Démarre après la fin de la deuxième animation

Il est toutefois possible d'ajouter la notion de décalage.

gsap.timeline()
  .to("#box", { x: 100, duration: 1 }) // Démarre à 0 seconde
  .to("#box", { rotation: 360, duration: 1 }, "-=0.5") // Démarre 0.5 seconde avant la fin de l’animation précédente
  .to("#box", { y: 100, duration: 1 }, "+=0.2"); // Démarre 0.2 seconde après la fin de l'animation précédente

Exercices¶

Exercice - GSAP
Automobile jaune

Exercice - GSAP
Automobile turquoise

Exercice - GSAP
Domino

Devoir¶

Remise du devoir 3 (Formatif) : 31 octobre à 23h59

Joindre le lien url de votre fork dans le devoir 3 sur Teams.

Devoir - GSAP
Alien

Exemples d'animations complexes et interactives : showcase sur gsap.com, collection sur codepen. ↩

Cours 9¶

Message de Françoise ¶

Bootcamp JS¶

Retour sur la partie JavaScript de l'examen¶

GSAP¶

Installation¶

Qu’est-ce qu’on peut animer ?¶

Comment les animations fonctionnent-elles ?¶

Syntaxe¶

to()¶

from()¶

fromTo()¶

set()¶

Configurations¶

Propriétés CSS¶

Configurations GSAP¶

Callbacks¶

Exemple complet¶

Timeline¶

Exercices¶

Devoir¶

Callbacks ¶