Tutoriel GreenSock GSAP

De EduTech Wiki
Aller à : navigation, rechercher
JavaScript
2017/06/11
Prérequis

1 Introduction

GSAP est une bibliothèque d'animation pour HTML5 et Flash. Cela permet d'animer tout ce à quoi JavaScript peut accéder (propriétés CSS, SVG, objets de la bibliothèque canevas, objets génériques...).

GSAP est constitué de plusieurs outils de bases, associés à quelques extensions.

Les outils de bases sont :

  • TweenLite : c'est le module d'animation de base de Greensock, très léger et rapide.
  • TweenMax : c'est le module complet de Greensock. Il permet d'étendre TweenLite en ajoutant quelques fonctions utiles comme repeat(), repeatDelay(), yoyo(), updateTo() et d'autres. Il inclut également par défaut les outils et extensions suivants : TweenLite, TimelineLite, TimelineMax, CSSPlugin, AttrPlugin, RoundPropsPlugin, DirectionalRotationPlugin, BezierPlugin, et EasePack.
  • TimelineLite : TimelineLite est un outil permettant de créer et de gérer simplement la chronologie des séquences TweenLite ou TweenMax.
  • TimelineMax : TimelineMax étend les fonctionnalités de TimelineLite, en rajoutant par exemple repeat(), repeatDelay(), yoyo(), currentLabel(), tweenTo(), tweenFromTo(), getLabelAfter(), getLabelBefore(), getActive() et d'autres.

Voir ici pour la liste des extensions disponibles :

Il existe une bonne documentation en Anglais:

On conseille:

2 Principes de base

2.1 Préparation

Avant de commencer, il est important de télécharger GSAP et de le décompresser dans un dossier parent de celui dans lequel vous travaillez.

GSAP permettant d'animer des éléments HTML, il vous faut donc créer une page HTML.

On inclut dans le body de celle-ci (en HTML) les éléments que l'on souhaite utiliser dans l'animation (ex : des conteneurs, des boutons...). Il faut bien donner un identifiant à chacun de ces éléments pour pouvoir les appeler plus tard avec GSAP.

Ensuite, on inclut de notre page html une ligne de script qui va dire à la page HTML de charger GSAP.

Exemple :

<script type="text/javascript" src="js/greensock/TweenMax.min.js"></script>

A partir de là il sera possible de commencer à animer des éléments.

Afin que le navigateur ne cherche pas à lancer l'animation alors que tous les éléments de la page ne sont pas encore chargés, l'ensemble des fonctions seront inclues dans un window.onload. Alternativement, placer la balise script à la fin d'une page marche aussi.

Exemple :

<script>
window.onload = function() {
Tout mon code JavaScript, dont le code faisant appel à GSAP
}
</script>

Attention, il n'est pas possible de mettre plusieurs fois window.onload dans un même document.

2.2 Création du code faisant appel à GSAP

Pour commencer, il faut créer une liste de variables. Ces variables contiendront les éléments html définis plus tôt et que vous souhaitez animer. On utilise pour cela la fonction JavaScript "document.getElementById"

Exemple : si j'ai deux div dans mon code html qui ont pour identifiants #syllabe et #mot

var syllabe = document.getElementById("syllabe"),
    mot = document.getElementById("mot");

Ensuite, on rajoute la ligne de code spécifique à GSAP utilisant TweenLite, TweenMax, TimelineLite ou TimelineMax.

Exemple : si je veux que mon élément syllabe dont j'ai défini la variable plus bas disparaisse en diminuant de taille :

TweenMax.staggerTo([syllabe], 1,{scale:0.2, opacity:0.3}, 0.25);

Le tout se situant toujours à l'intérieur de mon window.onload (voir plus bas pour des exemples complets de code).

3 Exemples

3.1 Simple animation de mouvement

Important:

  • L'élément à animer doit être positionné "relativement"
  • TweenLite.to(thing, 3, {left:"600px", ease:Bounce.easeOut}); veut dire qu'on bouge un objet "thing" pendant 3 secondes dans une position côté gauche = 600px (par rapport au containeur, en occurence le div.easeWrapper.
<!doctype html>
<html>
  <head>
      <title>Simple animation with GSAP</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <script type="text/javascript" src="src/minified/plugins/CSSPlugin.min.js"></script>
      <script type="text/javascript" src="src/minified/easing/EasePack.min.js"></script>
      <script type="text/javascript" src="src/minified/TweenLite.min.js"></script>
      <script>
	window.onload = function() {
	 var thing = document.getElementById("thing");
         TweenLite.to(thing, 3, {left:"600px", ease:Bounce.easeOut});
	}
      </script>

  </head>
  <body>
    <!-- define a box within which the thing will move -->
    <div id="easeWrapper" style="width:800px">
      <span id="thing" style="position:relative; border-style:solid; background:yellow">HELLO</span>
    </div>
  </body>
</html>

3.2 Simple animation de mouvement et de couleur

Pareil que ci-dessus, mais ajout d'autres paramètres d'animation.

<!doctype html>
<html>
  <head>
      <title>Simple animation with GSAP</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <script type="text/javascript" src="src/minified/plugins/CSSPlugin.min.js"></script>
      <script type="text/javascript" src="src/minified/easing/EasePack.min.js"></script>
      <script type="text/javascript" src="src/minified/TweenLite.min.js"></script>
      <script>
	window.onload = function() {
	 var thing = document.getElementById("thing");
         TweenLite.to(thing, 3, {left:"600px", 
	                         backgroundColor:"black",
                                 color:"white",
	                         ease:Bounce.easeOut});
	}
      </script>

  </head>
  <body>
    <!-- define a box within which the thing will move -->
    <div id="easeWrapper" style="width:800px">
      <span id="thing" style="position:relative; border-style:solid; background:yellow">HELLO</span>
    </div>
  </body>
</html>

3.3 Séquence d'animations avec TimeLineLite

TimeLineLite possède les même fonctions que TweenLite (la fonction to ou la fonction from par exemple). Il est cependant beaucoup plus facile de gérer la chronologie et la succession d'animations. Il est en effet possible de jouer sur le "delay" avec TweenLite, mais cela devient très compliqué lorsque nous allons devoir modifier l'ordre ou la durée d'une animation, car cela va tout décaler, et nous devrons retoucher à tous les délais. À la place de cela, TimeLine nous permet de définir notre chronologie d'événements de manière plus simple:

<!doctype html>
<html>
  <head>
      <title>Simple animation with GSAP</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <script type="text/javascript" src="src/minified/plugins/CSSPlugin.min.js"></script>
      <script type="text/javascript" src="src/minified/TweenLite.min.js"></script>
      <script type="text/javascript" src="src/minified/TimelineLite.min.js"></script>
      <script>
	window.onload = function() {
	 var thing = document.getElementById("thing"),
	 	thing2 = document.getElementById("thing2");
         tl = new TimelineLite();
		 
	 tl.from(thing, 1, {backgroundColor:"red", top:"+=100px"})
	    /*pedant 1 seconde, le premier bloc va monter de 100 pixel, et va passer du rouge à sa couleur normale (jaune) */
         .to(thing, 2, {left:"+=300px"}, "+=1")
	    /*après un délai d'une seconde, il va ensuite bouger vers la droite de 300px pendant 2 secondes */
	 .to(thing2, 1, {opacity:1}, "id1")
	 .to(thing, 1, {opacity:0}, "id1")
	    /* grâce à "id1" ces 2 animations se passeront en même temps. Le premier objet va donc disparaitre en même temps que le second apparait */
	 .to(thing2, 3, {rotation:"180deg", color:"white"})
	    /* dès la fin de l'animation précédente, le deuxième objet va tourner de 180 et son texte deviendra blanc pendant 3 secondes*/
	 .to(thing2, 1, {scale:2, opacity:0}, "-=1");
	    /* une seconde avant la fin de l'animation précédente, l'objet "thing2" va commencer à grossir et disparaître en même temps*/
	}
      </script>

  </head>
  <body>
      <div id="thing" style="position:absolute; left:0px; top=0px; border-style:solid; background-color:yellow">HELLO!</div>
      <div id="thing2" style="position:absolute; border-style:solid; background-color:green; opacity:0">GOODBYE!</div>
  </body>
</html>

Pour plus d'informations, on trouve une vidéo tutorielle sur le site de GreenSock: TimeLineLite

3.4 Animation sur propriétés css du DOM

A partir du CSSPlugin, avec Greensock on peut animer presque toutes les propriétés css d'un élément DOM, les basiques width, height, margin, padding, top, left, mais aussi d'autres telles que transforms (rotation, scaleX, scaleY, skewX, skewY, x, y, rotationX, rotationY), colors, opacity, etc. L'important est d'insérer le CSSPlugin. En général, il faut rappeler le css dans le Tween, exemple:

<TweenLite.to(element, 1, {css:{left:"100px", top:"50px"}});

de cette manière le script reconnaît que ces propriétés appartiennent au CSSPlugin. Il y a, toutefois, la possibilité d'utiliser le code sans le css:{} puisque TweenLite et TweenMax (version 1.8.0) vont automatiquement vérifier si l'objet à animer est un élément DOM et si c'est le cas, il vont créer l'élément css. Pour plus de détails sur ce point, voir la page dédiée sur le site de Greensock.

3.5 Animation avec Repeat

Dans ce cas, l'animation se répète 20 fois et avec la propriété yoyo, elle fait lorsqu'elle se termine un effet inverse. La function onRepeat, permet de changer de couleur à chaque animation.
<TweenMax.to('#shape', 0.5, {y:100, repeat:20, yoyo:true, onRepeat:onRepeat,  repeatDelay:0.5});
 function onRepeat() {
  TweenLite.set('#shape', {backgroundColor:"hsl(" + Math.random() * 255 + ", 90%, 60%)"});
}

3.6 Animation avec StaggerTo

Dans ce cas, l'animation agit sur chaque objet de la classe btn, pour effectuer un effet boule de neige, avec 0.1 seconde de délai entre l'animation de chaque objet.
<TweenMax.staggerTo(".btn", 0.5, {opacity:0, y:-100, ease:Back.easeIn}, 0.1);

3.7 Animation SVG

4 Problèmes

Attention aux permissions et noms de fichiers et répertoires. Testez si les bibliothèques chargées sont accessibles

5 Intégration avec Animate CC

Il existe des templates permettant d'utiliser plus facilement GSAP dans Animate CC. Deux articles sont particulièrement utiles pour débuter:

Voir également ce sujet sur le forum de Greensock.

6 Liens

6.1 Documentation officielle

6.2 Tutos, exemples

6.3 Utilisation avec Action Script 3