Tutoriel GreenSock GSAP

De EduTech Wiki
Aller à la navigation Aller à la recherche

Cet article est une ébauche à compléter. Une ébauche est une entrée ayant un contenu (très) maigre et qui a donc besoin d'un auteur.

Exemples

Simple animation de movement

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>

Problèmes

Attention aux permissions et noms de fichiers et répertoires. Testez si les libraires chargés sont accessibles

Liens

Documentation officielle

Tutos, exemples

Utilisation avec Action Script 3