« Tutoriel GreenSock GSAP » : différence entre les versions
Aller à la navigation
Aller à la recherche
m (→Problèmes) |
m (→Simple animation de movement : coquille orthographique) |
||
| Ligne 13 : | Ligne 13 : | ||
== Exemples == | == Exemples == | ||
=== Simple animation de | === Simple animation de mouvement === | ||
* http://tecfa.unige.ch/guides/js/gsap/gsap-animation-1.html | * http://tecfa.unige.ch/guides/js/gsap/gsap-animation-1.html | ||
Version du 1 décembre 2014 à 23:13
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.
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.