Tutoriel GreenSock GSAP

De EduTech Wiki
Aller à la navigation Aller à la recherche
JavaScript
2014/12/15
Prérequis

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, ojets de la bibliothèque du 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 d'explorer Jump Start: GSAP JS pour commencer.

Principes de base

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

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.

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).

Exemples

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>

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>

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

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.

Animation SVG

Problèmes

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

Liens

Documentation officielle

Tutos, exemples

Utilisation avec Action Script 3