Multimédia

GSAP: Introduction

GSAP est une bibliothèque Javascript qui comprend des fonctions permettant d'animer des éléments HTML, CSS et bien d'autres éléments du Web.

Charger GSAP

Pour charger GSAP et puis l'utiliser dans notre script, ajoutez l'élément suivant sur une nouvelle ligne avant le script main.js

<script src="https://unpkg.com/gsap"></script>

COPY

Exemple

Après d'avoir chargé GSAP, on peut créer un élément HTML dans index.html qu'on aimerait animer.

<div id="box"></div>

COPY

On va faire une simple boite pour commencer avec le id box. En suite dans notre style.css on ajoute:

#box {
  width: 200px;
  height: 200px;
  background: blue;
}

COPY

Ensuite dans notre main.js on peut commencer à faire une animation avec GSAP. Ajoute dans main.js:

gsap.to('#box', { 
  x: 500, 
  backgroundColor: 'red', 
  delay: 1, 
  duration: 3
});

COPY

Ceci va faire une animation qui bouge notre #box 500px sur l'axe horizontale et le couleur de fond à rouge. La durée est 3 seconde et il commence après un délai de 1 seconde.

gsap.to()

gsap.to() fait passer une animation de son état préexistant à un nouvel état défini dans les variables.

Pour créer une animation, gsap.to() a besoin de 2 choses :

cible - L'objet-s que vous animez. Cela peut être un objet brut, un tableau d'objets, ou un texte de sélection comme ".myClass".

variables - Un objet avec des paires de propriétés/valeurs que vous animez (comme opacity:0.5, rotation:45, etc.) et d'autres propriétés spéciales facultatives comme la durée (duration).

// syntax: gsap.to(cible, { variables });

gsap.to('#box', { 
  opacity: 0.5, 
  rotation: 45, 
  duration: 1 
});

COPY

gsap.from()

gsap.from() fonctionne à l'inverse de gsap.to(). Réaliser une animation à partir de ses variables définies et en revenir à son état préexistant.

Sinon gsap.from() est pareil.

// syntax: gsap.from(cible, { variables });

gsap.from('#box', { 
  opacity: 0.5, 
  rotation: 45, 
  duration: 1 
});

COPY

gsap.timeline()

gsap.timeline() nous permet d'enchainer des animations ensemble.

Il faut d'abord déclarer le gsap.timeline() dans une variable, et ensuite on peut l'utiliser avec to() et from().

var tl1 = gsap.timeline({
  repeat: -1 // -1 = infinite
})
// etape 1
.to('#box', { 
  x: 500, 
  delay: 1, 
  duration: 3 
})
// etape 2
.to('#box', { 
  rotate: 360, 
  duration: 1 
})
// etape 3
.to('#box', { 
  x: 0, 
  y: 200, 
  duration: 3
})

COPY

Pour savoir plus sur les differentes possibilité de GSAP: Voir ici

Options

x (left, px)
y (top, px)
rotation (transform: rotate())
rotationX (transform: rotateX())
rotationY (transform: rotateY())
skewX (transform: skeWX())
skewY (transform: skewY())
scale (transform: scale())
scaleX (transform: scaleX())
scaleY (transform: scaleX())
xPercent (left, %)
yPercent (top, %)
color
opacity (0 - 1)
backgroundColor (background-color)
fontSize (font-size)