Dans les termes du Skill
gsap-core est le skill d'entrée pour le moteur central de GSAP : tweens simples avec gsap.to(), gsap.from(), gsap.fromTo() et gsap.set(), ainsi que les vars courantes — duration (par défaut 0.5), delay, ease (par défaut power1.out), stagger, overwrite et immediateRender. Il documente les alias de transformation de GSAP (x, y, scale, rotation, xPercent), autoAlpha pour les fondus, clearProps, les valeurs basées sur des fonctions et relatives, ainsi que gsap.defaults() à l'échelle du projet.
Une grande section couvre gsap.matchMedia() pour les points de rupture responsives et prefers-reduced-motion, se terminant par une liste officielle de bonnes pratiques et une section À ne pas faire. Il est rédigé pour les designers et développeurs qui écrivent ou révisent des animations GSAP en React, Vue, Svelte ou JS vanilla.
Ce qu'il produit
- Éléments DOM animés via CSSPlugin, qui est livré à l'intérieur du moteur central et ne nécessite aucun plugin supplémentaire.
- Une instance Tween renvoyée par chaque méthode tween, que vous stockez lorsque vous devez la mettre en pause, la lancer, l'inverser, la tuer ou la scruber.
- Des transformations écrites sous forme d'alias et appliquées dans un ordre fixe : translation, scale, rotationX/Y, skew, rotation.
- Des animations et ScrollTriggers créés à l'intérieur d'un gestionnaire matchMedia, annulés automatiquement dès que la requête ne correspond plus.
Fonctionnement
- 01Choisir la méthode Tween
gsap.to() anime de l'état actuel vers les vars passées et est l'appel le plus courant ; from() inverse cela pour les entrées, fromTo() indique explicitement les deux extrémités sans lire les valeurs actuelles, et set() applique instantanément avec une durée de 0.
- 02Écrire les vars en camelCase
Les noms de propriétés à l'intérieur de l'objet vars doivent être en camelCase, donc des propriétés CSS comme background-color ou font-size deviennent backgroundColor et fontSize.
- 03Décaler avec Stagger
Un simple nombre sur stagger correspond aux secondes entre chaque cible ; la forme objet ajoute des options comme amount avec une direction from, ou each avec from: "random".
- 04Choisir un Ease
Les eases sous forme de chaîne couvrent la plupart des cas — power1.out est le ressenti par défaut, avec back.out(1.7), elastic.out(1, 0.3), power3.inOut et none comme alternatives documentées.
- 05Calculer les valeurs par cible
Une fonction passée comme valeur de vars est appelée une fois pour chaque cible au premier rendu, ce qui permet de répartir des valeurs basées sur l'index comme x: (i) => i * 50 sur un ensemble.
- 06Limiter le travail aux requêtes média
gsap.matchMedia() n'exécute son gestionnaire de configuration que tant que la requête correspond, ce qui permet au skill de gérer les points de rupture responsives et les utilisateurs en mode réduction des animations.