Cours 12 - Plugiciels¹¶

Plugiciels gratuits¶

Draggable¶

Le plugiciel Draggable permet de transformer n’importe quel élément en un objet que l’utilisateur peut déplacer avec des interactions de glisser-déposer (drag & drop).

gsap.registerPlugin(Draggable);

Draggable.create(".box", {
  type: "x,y",
  bounds: "#container",
  onDrag: function() {
    console.log("Position : ", this.x, this.y);
  }
});

type : Spécifie le type de mouvement autorisé. Les options incluent “x”, “y”, “rotation”, etc.
bounds : Limite les déplacements de l’élément à l’intérieur d’un conteneur spécifié.
onDrag : Callback appelée lors du déplacement de l’élément, utile pour obtenir la position actuelle.

MotionPath¶

Le plugiciel MotionPath permet d’animer des objets le long d’un chemin défini, offrant des animations complexes et précises.

gsap.registerPlugin(MotionPathPlugin);

gsap.to(".box", {
  duration: 5,
  motionPath: {
    path: "#cheminSVG",
    align: "#cheminSVG",
    autoRotate: true,
    alignOrigin: [0.5, 0.5]
  }
});

path : Chemin SVG ou tableau de coordonnées définissant le trajet de l’animation.
align : Aligne l’élément animé sur le chemin spécifié.
autoRotate : Fait pivoter automatiquement l’élément dans la direction du chemin.
alignOrigin : Point d’origine pour l’alignement, généralement [0.5, 0.5] pour centrer.

Text¶

Le plugiciel Text permet d’animer le contenu textuel d’un élément DOM, en remplaçant progressivement le texte existant par un nouveau.

gsap.registerPlugin(TextPlugin);

gsap.to(".texte", {
  duration: 2,
  text: "Nouveau contenu textuel",
  ease: "none"
});

text : Nouveau texte à afficher. Peut être une chaîne de caractères ou un objet avec des propriétés telles que value, delimiter, newClass, etc.
delimiter : Caractère utilisé pour diviser le texte, par défaut une chaîne vide pour une animation caractère par caractère.
newClass : Classe CSS appliquée au nouveau texte.
oldClass : Classe CSS appliquée à l’ancien texte.
padSpace : Si true, ajoute des espaces insécables pour maintenir la longueur du texte lors de la transition.
preserveSpaces : Si true, conserve les espaces multiples dans le texte.

Plugiciels payants , mais disponibles ¶

MotionPath Helper¶

Le plugiciel MotionPath Helper fournit une interface interactive pour créer et ajuster des chemins de mouvement directement dans le navigateur, facilitant la conception d’animations complexes.

gsap.registerPlugin(MotionPathHelper);

const tween = gsap.to(".objet", {
  duration: 5,
  motionPath: {
    path: "#chemin",
    align: "#chemin",
    autoRotate: true
  }
});

MotionPathHelper.create(tween);

motionPath : Objet définissant le chemin de mouvement, avec des propriétés telles que path, align et autoRotate.
path : Chemin SVG ou tableau de points définissant le trajet de l’animation.

DrawSVG¶

Le plugiciel DrawSVG permet d’animer la révélation progressive ou la dissimulation des contours d’éléments SVG tels que <path>, <line>, <polyline>, <polygon>, <rect> ou <ellipse>.

gsap.registerPlugin(DrawSVGPlugin);

gsap.from(".ligne", {
  duration: 2,
  drawSVG: 0
});

drawSVG : Définit la portion du tracé à afficher. Par exemple, drawSVG: "0% 100%" affiche l’intégralité du tracé, tandis que drawSVG: "50% 50%" affiche uniquement le milieu du tracé.

ScrambleText¶

Le plugiciel ScrambleText permet d’animer le texte en le remplaçant par des caractères aléatoires, créant un effet de déchiffrement ou de brouillage.

gsap.registerPlugin(ScrambleTextPlugin);

gsap.to(".texte", {
  duration: 1.5,
  scrambleText: "Nouveau texte",
  chars: "lowerCase",
  revealDelay: 0.5
});

scrambleText : Le texte final à afficher après l’animation.
chars : Les caractères utilisés pour le brouillage. Options : "upperCase", "lowerCase", "upperAndLowerCase" ou une chaîne personnalisée.
revealDelay : Délai avant le début de la révélation du texte final.

Inertia¶

Le plugiciel Inertia de GSAP permet de créer des animations avec une inertie réaliste, simulant un mouvement qui ralentit progressivement jusqu’à s’arrêter, idéal pour des effets de lancer ou de glissement.

gsap.registerPlugin(InertiaPlugin);

Draggable.create(".objet", {
  type: "x,y",
  throwProps: true,
  inertia: {
    resistance: 100
  }
});

inertia : Objet définissant les propriétés d’inertie, telles que la résistance ou les limites de mouvement.
resistance : Valeur contrôlant la rapidité avec laquelle le mouvement ralentit.

MorphSVG¶

Le plugiciel MorphSVG permet de transformer une forme SVG en une autre, même si elles ont un nombre de points différent, offrant des transitions fluides entre des formes complexes.

gsap.registerPlugin(MorphSVGPlugin);

gsap.to("#forme1", {
  duration: 2,
  morphSVG: "#forme2",
  shapeIndex: 2
});

morphSVG : Sélecteur ou élément cible vers lequel la forme doit se transformer.
shapeIndex : Contrôle la correspondance des points entre les formes pour une transition plus fluide.

SVG

Vous pouvez trouver des SVG gratuit ici : https://www.svgrepo.com/collection/free-animals/

SplitText¶

Le plugiciel SplitText permet de diviser le texte en caractères, mots ou lignes individuels, facilitant ainsi des animations détaillées et précises sur chaque segment de texte.

gsap.registerPlugin(SplitText);

const split = new SplitText(".texte", { type: "words,chars" });

gsap.from(split.chars, {
  duration: 1,
  y: 50,
  opacity: 0,
  stagger: 0.05
});

type : Spécifie comment le texte est divisé, avec des options telles que "chars", "words", "lines" ou une combinaison de celles-ci.
stagger : Définit le délai entre le début des animations pour chaque segment, créant un effet de cascade.