Tutoriel GreenSock GSAP
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.
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.
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>
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
- Greensock (home page)
- GSAP: Professional-Grade HTML5 Animation
- Jump Start: GSAP JS (démo donné dans le cours)
- Getting Started Guide
Tutos, exemples
- Greensock JavaScript Animation, Blog post, 2012.