Commencez avec la plate-forme d'animation de Greensock

Sep 14, 2025
Comment
GreenSock Animation Platform logo [dix] [dix] [dix]
[dix]

La plate-forme d'animation Greensock (GSAP) vous permet d'animer tout ce que vous pouvez accéder à JavaScript, y compris DOM, Toile et CSS, ainsi que vos propres objets personnalisés.

[dix]

GSAP aide également à résoudre les incohérences du navigateur pour faciliter Test de l'utilisateur (bon hébergement Web Peut-on aider ici aussi), vous permet d'utiliser des objets pour gérer des animations complexes et fonctionne jusqu'à 20 fois plus vite que JQuery. Il est devenu une norme dans l'industrie et a été utilisée dans d'innombrables sites Web primés. Vous avez un site pour construire? Voici notre guide sur le meilleur Générateur de site Web autour de.

01. Configurez un fichier HTML de base

Get started with GSAP: Set up a basic HTML file

[dix] [dix]
Inclure une image avec le logo Classe dans votre fichier HTML

La meilleure façon d'apprendre le GSAP est de le voir en action. Dans ce tutoriel, vous découvrirez les principales caractéristiques de la plate-forme avec des exemples de travail que vous pouvez mettre à utiliser dans vos projets aujourd'hui!

Commencez par configurer un fichier HTML de base, où vous pouvez déposer votre code JavaScript. Inclure une image avec un logo classer. Vous utiliserez GSAP pour animer des propriétés pour voir comment cela fonctionne. 

 & lt; html lang = "fr" & gt;
& lt; tête & gt;
  & lt; style & gt;
    .logo {largeur: 150px; }
  & lt; / style & gt;
& lt; / tête & gt;
& lt; corps & gt;
& lt; img classe = "logo"
src = "logo.svg" / & gt;
& lt; script & gt;
// code ici
& lt; / script & gt;
& lt; / corps & gt;
& lt; / html & gt;

02. Inclure la bibliothèque GSAP

Ensuite, vous devrez ajouter GSAP à votre projet Web. Entre votre & lt; image & gt; et & lt; script & gt; Tags, insérez un lien vers la bibliothèque GSAP. Vous pouvez télécharger le zip directement à partir de ici ou attrapez-le de Github (Si vous avez des fichiers à partager, choisissez le parfait stockage en ligne ). Les fichiers sont également hébergés sur le SUPER-FAST CloudFlare CDN, de sorte que le moyen le plus simple est d'utiliser les fichiers hébergés comme celui-ci:

[dix] 
 & lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/tweenmax.min.js" & gt; & lt; / script & gt;

03. Animate avec Tweening

Tweening est le processus de changement de valeur au fil du temps pour créer une animation. Par exemple, déplaçant un objet de A à B, le redimensionnant ou la rotation. Vous pouvez également entre vos propres valeurs personnalisées.

Le moyen le plus simple de Tween une propriété est d'utiliser le Tweenmax.to () fonction. Cela nécessite un objet cible, une durée et les paires de biens / valeur que vous utilisez. Pour voir la fonction en action, essayez chacune des lignes de code ci-dessous en utilisant le logo comme objet cible: 

 // Tween X Position du courant
à 400 sur 2 secondes
Tweenmax.to (". Logo", 2, {x: 400});
// Tween Y Position du courant
à 200 et opacité à 0, sur 1
deuxième
Tweenmax.to (". Logo", 1, {y: 200, opacité: 0});
// entre x et y à 100, échelle à
1,5, et pivoter 90 degrés, sur 2
deuxième
Tweenmax.to (". Logo", 2, {x: 100, Y: 100, échelle: 1,5, rotation: 90});

04. Tween de et depuis

Get started with GSAP: Tween from and FromTo

[dix] [dix]
Vous pouvez définir les valeurs de début et de fin pour la tendance

Vous pouvez entretenir une propriété de sa valeur actuelle à une nouvelle utilisation en utilisant à() , mais vous pouvez aussi entre de une valeur à sa valeur actuelle. Par exemple, si votre logo commence à x position 0 Et vous voulez que cela se termine là-bas, vous pourriez faire cela: 

 Tweenmax.from (". Logo", 2, {x: 400});

Dans ce cas, votre logo passera immédiatement à x = 400 et puis entre à x = 0 . Vous pouvez même définir les valeurs de début et de fin, en ignorant les valeurs actuelles en utilisant de à() comme ça: 

 Tweenmax.fromto (". Logo", 2, {x: 400}, {x: 200});

05. RESETATION

Get started with GSAP: Easing

[dix] [dix]
L'assouplissement ajoute du caractère à vos animations

L'assouplissement est le «style» de l'animation, car la transition de valeurs de A à B. Au lieu d'un taux de vitesse constant, appelé «linéaire», vous pouvez appliquer des fonctions pour courber le taux de vitesse. Commencent-ils lentement et accélèrent progressivement? Est-ce qu'ils arrivent à une interruption abrupte et rebondissent un peu à la fin? Dans l'animation, ces styles ajoutent de caractère et d'émotion à votre travail. Vous pouvez appliquer une fonction d'assouplissement comme celle-ci: 

 Tweenmax.to (". Logo", 2, {x: 100, Y: 100, rotation: 90, facilité: circ.asein});

06. Easting Fonctions et IN / OUT

Get started with GSAP: Easing functions and In / Out

[dix] [dix]
Il y a beaucoup d'options d'assouplissement à choisir avec GSAP

GSAP comprend une variété de fonctions d'assouplissement, telles que retour , rebondir , élastique , péché , encercler , et expo . Vous avez peut-être aussi remarqué que le facilité fonction a une propriété de facilité dans , que nous avons utilisé dans l'étape ci-dessus. Vous pouvez aussi utiliser éventuellement et apathique . Celles-ci indiquent où la courbe d'assouplie est appliquée dans l'animation. Essayez ce qui suit pour voir les résultats: 

 // S'absenter avec un rebond
Tweenmax.to (". Logo", 2, {x: 100, Y: 100, rotation: 90, facilité: Bounce.aseout});
// S'assisent à et à l'élastique
Tweenmax.to (". Logo", 2, {x: 100, Y: 100, rotation: 90, facilité: élastic.aseinout});

07. Retarder une Tween

Parfois, vous voudrez retarder le début d'une animation, soit de le synchroniser avec une autre animation, soit de la faire attendre qu'un événement se produise. Vous pouvez utiliser une autre propriété spéciale de GSAP appelée retard pour faire ça. Essayez le code suivant pour voir comment vous pouvez retarder les tweens pour une synchronisation spécifique: 

 Tweenmax.To (". Logo", 1, {Y: 100, facilité: Bounce.aseout});
// retarder cette quinte de 1 seconde
Tweenmax.to (". Logo", 1, {rotation: 90, facilité: circ.aseout, délai: 1});
[dix]

08. Fonctions de rappel

Pour intégrer des animations avec votre code, il est important de savoir quand les événements se produisent, surtout lorsqu'une animation se termine ou commence. Vous pouvez utiliser le surcompter rappel d'événement pour cela. Vous voudrez peut-être savoir quand une Tween commence, en utilisant à côté . Et vous pouvez également vouloir synchroniser votre Tween avec une autre animation ou utiliser la Tween et son assouplissement pour mettre à jour un autre objet personnalisé. Utilisez le surpasser rappel pour cela. Voici comment vous utilisez le rappel: 

 Tweenmax.to (". Logo", 1, {
Y: 100,
Facilité: Bounce.easeout,
ONCOMPLETE: Tweencomplete
});
Fonction Tweencomplete () {
console.log ("Tween complet");
}

09. Paramètres de rappel

Lors du déclenchement des rappels, vous souhaiterez peut-être transmettre des informations avec le rappel à la fonction qui le gère. Vous devrez peut-être passer des informations sur l'appelant ou les valeurs spécifiques. Cela vous permet d'intégrer vos animations avec le reste de votre base de code. Tous les paramètres sont passés via Callback + "paramètres" , C'est ONUPDATEPARAMS .

Dans l'exemple suivant, vous pouvez suivre la progression de la Tween à l'aide du mot clé {soi} et peut voir comment passer plusieurs paramètres à l'aide d'un tableau: 

 Tweenmax.to (". Logo", 1, {
Y: 100,
Facilité: Bounce.easeout,
ONUPDate: tweenupdate,
ONUPDATEPARAMS: ["{auto}",
"complété"]
});
fonction tweenupdate (Tween,
un message) {
Var pourcentage = Tween.
progrès () * 100; // le progrès()
est une valeur 0-1
console.log (pourcentage +
"" + message);
}

10. Contrôler des animations

D'accord, vous pouvez donc créer des tweens et faciliter les tweens, les rappels de feu et les paramètres. Mais comment contrôlez-vous des animations? Souvent, vous voulez commencer ou les arrêter en fonction d'autres événements.

Si vous avez besoin d'arrêter une animation, vous pouvez utiliser le pause() méthode. Si vous voulez reprendre une Tween, utilisez CV() . Détruire totalement une utilisation entre tuer() . Essayez ce qui suit et voyez ce qui se passe: 

 // var pour tenir la référence à Tween
Var Tween = Tweenmax.To (".
Logo ", 2, {y: 100, facilité: rebondir.
Faible});
// pause immédiatement
tween.pause ();
// commence sur l'événement
SettimeOut (fonction () {Tween.
CV ()}, 1000);
// Animation inversée sur l'événement
SettimeOut (fonction () {Tween.
inverse ()}, 3000);

11. CSS et CSSPLUGIN

Get started with GSAP: CSS and CSSPlugin

[dix] [dix]
Le CSSplugin détecte automatiquement lorsqu'il est nécessaire pour les animations

Le CSSPlugin est inclus lorsque vous utilisez Tweenmax . Il s'agit d'un énorme gain de temps, en ce sens qu'elle normalise les comportements entre les navigateurs et détecte automatiquement lorsqu'il est nécessaire pour les animations. CSSPLUGIN peut gérer des tweens couleur, des animations SVG et des performances optimisées avec la mise en cache et d'autres astuces internes - et il est souvent plus efficace de traduire les positions via CSS.

Vous avez déjà vu cela en action lorsque vous avez utilisé le opacité et positionner animations. Cela fonctionne sans codage spécial!

12. Transformations 2D et 3D

Get started with GSAP: 2D and 3D transforms

[dix] [dix]
Le GSAP comprend des transformations intégrées qui vous permettent de faire échelle, tournez-la traduisée et raffinée

Les transformations CSS vous permettent d'accroître, faites pivoter la traduction et la broyage. Ils travaillent dans 2D et 3D pour créer de beaux effets rapidement. Le GSAP comprend des propriétés de transformation intégrées telles que X , toi , rotation , rotation , rotation , skewx et escalader . Essayez d'appliquer la Tween suivante sur votre image au lieu de celles que nous avons déjà essayées: 

 Tweenmax.To (". Logo", 3, {
x: 100,
Y: 100,
Échelle: 1.5,
Rotationy: 360,
facilité: bounce.aseout});

13. Timelines

Get started with GSAP: Timelines

[dix] [dix]
L'objet Timeline de GSAP vous permet de gérer plusieurs animations

Une fois que vous vous êtes démarré au-delà d'une ou deux tweens, vous vous demandez peut-être comment gérer plusieurs animations. GSAP comprend un chronologie objet à faire exactement ça. Vous appendez des tweens à la chronologie objet et peut utiliser le positionner paramètre après la quinte de temps. Vous pouvez avoir des tweens l'exécuter l'un après l'autre ou avoir des lacunes, ou même les chevaucher. Ajoutez quelques images de plus sur votre HTML avec des cours logo2 et logo3 respectivement.

Pour voir comment cela fonctionne, essayez ce qui suit chronologie code: 

 // Créer une instance de chronologie
var tl = nouveau timelinemax ();
tl.add (tweenmax.to (". logo", 1,
{x: 50}));
// Notez le dernier "0" à faire
Celui-ci commence à 0 sec.
tl.add (tweenmax.to (". logo2", 1,
{Y: 100}), "0");
// Notez le "+,25" pour faire cela
on commence à .25 secondes
tl.add (tweenmax.to (". logo3", 1,
{Rotationy: 180, Y: 50,
X: 50}), "+. 25");

14. Contrôle de la chronologie

En plus de contrôler des animations, vous voudrez peut-être aussi contrôler les délais. Heureusement, vous pouvez mettre en pause, reprendre et inverser comme vous le pouvez avec des animations. Vous pouvez également ajouter des paramètres à la chronologie à répéter , yo-yo et ajouter des rappels pour l'ensemble de la chronologie. Vous pouvez également contrôler la vitesse de la chronologie en utilisant le coup de temps biens. Essayez de remplacer votre déclaration de timeline avec le code suivant pour voir comment cela fonctionne: 

 var tl = nouveau timelinemax ({
// répète infiniment
Répéter: -1,
Yoyo: True,});

15. Obtenez et définir des propriétés

Une caractéristique qui est vraiment utile est d'obtenir et de définir des propriétés de tweens et de délais. De cette façon, vous pouvez apprendre à connaître les progrès et la durée globaux, ou collecter d'autres informations sur un objet GSAP. Dans ce code exemple, vous pouvez obtenir la durée de la chronologie, puis ensemble sa durée pour le changer. Cela fonctionne la même chose pour les tweens également. C'est un autre excellent moyen de réagir en temps réel aux événements et de modifier des animations à la volée. Ajoutez les éléments suivants après votre précédent code de chronologie: 

 // obtenir la durée actuelle de
la chronologie
console.log (tl.duration ());
// définit la durée à 5 secondes
Après une 2 seconde, attendez
SettimeOut (fonction () {
tl.duration (5);
}, 2000);

Cet article a été publié à l'origine dans Creative Web Design Magazine Web Designer. Acheter numéro 279 ou s'abonner .

Lire la suite:

  • Supercharger des animations SVG avec GSAP
  • Exporter après des animations d'effets sur HTML5
  • Comment créer des animations qui échelle pour tous les appareils
[dix] [dix]
[dix]

Comment - Most Popular Articles

Comment éditer une vidéo sur tiktok

Comment Sep 14, 2025

[DIX] [DIX] [DIX] [dix] (Crédit d'image: Mabel Wynne) [DIX] Apprendre à modifier U..

Comment dessiner des muscles

Comment Sep 14, 2025

[DIX] [DIX] [DIX] [dix] [DIX] Savoir Tirer des Muscules en Mouvement AJOUTERA LA FIDEITÉ ET LE MOUVEMENT..

Comment éliminer les rides dans Photoshop

Comment Sep 14, 2025

[DIX] [DIX] [DIX] [dix] (Crédit d'Images: Jason Parnell-Brookes) [DIX] Tutoriel VOU..

Créer un bot mou sur mesure

Comment Sep 14, 2025

[DIX] [DIX] [DIX] [dix] (Crédit d'image: concepteur web) [DIX] Slack Est Nations Un..

Comment redimensionner une image dans Photoshop

Comment Sep 14, 2025

[DIX] [DIX] [DIX] [dix] [DIX] Savoir Redimensionnerner Une image dans Photoshop est une compétition Fond..

Commencez avec WebVR

Comment Sep 14, 2025

[DIX] [DIX] [DIX] [dix] [DIX] Sauter à: WEBVR Ress..

Comment influencer les classements de Google avec votre contenu

Comment Sep 14, 2025

[dix] [dix] [dix] [dix] Votre contenu ne se passe nulle part à moins que les personnes puissent la r..

Peindre une carte de tarot originale

Comment Sep 14, 2025

[dix] [dix] [dix] [dix] Quand j'ai reçu mon premier pont de tarot, j'étais enchanté par la belle i..

Catégories