STIC:Atelier graphisme, animation, interactivité et HTML5/Simple animation JS avec GSAP

De EduTech Wiki
Aller à la navigation Aller à la recherche
La version imprimable n’est plus prise en charge et peut comporter des erreurs de génération. Veuillez mettre à jour les signets de votre navigateur et utiliser à la place la fonction d’impression par défaut de celui-ci.
<!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>
    <!-- définition d'une boite -->
    <div id="easeWrapper" style="width:800px">
      <!-- une chose qui va bouger dans la boite -->
      <span id="thing" 
            style="position:relative; border-style:solid; background:yellow">
            HELLO
      </span>
    </div>
  </body>
</html>