Personnalisation et animation dans Vue avec GSAP

GSAP est une bibliothèque d’animation que les développeurs de Vue voudront peut-être connaître pour ajouter un peu de mouvement à leurs applications.

L’animation profite à un site Web en rendant l’interaction plus engageante, intuitive et visuellement attrayante. Il améliore l’expérience utilisateur, donne une excellente première impression et rend les visiteurs plus satisfaits de votre site Web.

Bien que l’animation puisse grandement bénéficier à votre site Web, elle peut également avoir un impact négatif sur votre site Web si elle n’est pas mise en œuvre de manière réfléchie : elle peut nuire à la réactivité, à l’accessibilité et aux performances. La meilleure méthode pour maintenir un équilibre dans vos animations est de les garder attrayantes et simples. C’est ce que cet article va nous apprendre.

Nous pouvons utiliser une variété de bibliothèques d’animation bien connues avec Vue pour notre projet. Aujourd’hui, nous allons découvrir une bibliothèque d’animation avancée que nous pouvons utiliser pour développer des animations et des transitions fluides appelées Plateforme d’animation de chaussettes vertes (GSAP). Après cet article, nous saurons comment exploiter les fonctionnalités d’animation de GSAP pour créer des animations attrayantes pour notre application. Vous n’avez pas besoin d’une compréhension préalable de l’utilisation du GSAP, car nous passerons en revue ses principes fondamentaux et ses domaines d’intervention.

Qu’est-ce que le GSAP ?

La plateforme d’animation Green Sock est une animation JavaScript de qualité professionnelle pour le Web. Cela nous aide à créer des animations qui s’affichent parfaitement sur tous les principaux navigateurs. GSAP est modulaire, adaptable et très efficace. La conception de son plugin établit un équilibre en gardant le moteur de base simple et efficace tout en permettant d’ajouter n’importe quelle fonctionnalité via des plugins facultatifs. Il est compatible avec DOM, Canvas, SVG et Animate CC. Il contient des fonctionnalités professionnelles conviviales pour les débutants.

Nous pouvons animer n’importe quelle propriété numérique d’un objet à l’aide de GSAP, car il n’a pas de liste prédéfinie parmi laquelle sélectionner. Il gère les valeurs de chaîne complexes avec des couleurs imbriquées dans n’importe quel format. La particularité de GSAP est qu’il n’a aucune dépendance, ce qui signifie qu’il n’est pas construit sur des technologies tierces, telles que jQuery, bien que nous puissions intégrer GSAP à jQuery. Cela réduit le temps de chargement et améliore les performances du site Web.

Fondamentaux du GSAP

GSAP comprend une gamme complète d’outils et de fonctionnalités qui facilitent la création d’animations fluides et convaincantes. Voici quelques idées fondamentales du GSAP.

Note: Les fonctionnalités d’animation de GSAP sont mises à jour. Au lieu de construire ou de faire référence aux différents aspects des bases du GSAP comme TweenMax, TweenLite, TimelineMax ou TimelineLite, nous pouvons les simplifier en un objet GSAP. Consultez la documentation pour obtenir les dernières mises à jour sur la syntaxe et d’autres mises à jour.

Entre

Une interpolation est une instance unique de ce qui applique des valeurs de propriété prédéterminées à un objet tout en déplaçant un objet d’un point d’une page Web à un autre. Cela peut modifier de nombreuses caractéristiques de plusieurs objets au fil du temps.

TweenMax.method(element, duration, vars)

La fonction Tween dispose de trois méthodes : les éléments, la durée et les propriétés de l’objet. La propriété target, également appelée élément, représente l’élément HTML que nous souhaitons animer. La propriété de durée est la durée de l’animation en secondes. Et le var représente les propriétés du composant ciblé que nous souhaitons animer.

Les méthodes courantes que nous pouvons utiliser pour créer une interpolation sont gsap.to(), gsap.from() et gsap.fromto().

Chronologie

Une chronologie contient plusieurs interpolations, gère le séquençage et le timing de différentes applications, et gère et chorégraphie des séquences d’animation complexes.

const timeline = gsap.timeline();

Assouplissement

L’assouplissement est l’aspect le plus crucial du motion design car il affecte la manière dont un objet passe d’un point à un autre ainsi que l’apparence souhaitée. Dans GSAP, la facilité contrôle le rythme de changement de l’animation et est utilisée pour définir le style d’animation d’un objet. GSAP propose plusieurs choix relaxants et un graphique exemple pour nous aider à comprendre leurs différentes fonctions.

Échelonnement

Les décalages sont utilisés pour animer un ensemble d’éléments. Un swagger nous permet de fixer l’heure de début de l’animation de chaque composant du groupe. Grâce à ses outils intégrés, GSAP simplifie l’échelonnement des animations.

gsap.method(element, { 
stagger: .1
})

Déplaçable

Le plugin Draggable nous permet de contrôler les composants HTML en les faisant glisser, en les faisant tourner et même en les faisant défiler à l’aide d’événements de souris et de toucher. En utilisant le plugin déplaçable de GSAP, nous pouvons créer des éléments dynamiques qui passent facilement d’une position à l’autre, créant ainsi un mouvement animé d’un endroit à un autre.

Créer une animation de base avec la méthode GSAP

Avant de commencer à créer des animations GSAP simples, nous devons d’abord comprendre les différentes méthodes proposées par GSAP pour créer des animations. Ces méthodes acceptent trois valeurs :

• L’élément à animer
• L’objet contenant les propriétés à animer
• La durée de l’élément

Les méthodes aident à générer des valeurs finales et initiales pour les animations. Dans la partie suivante, nous verrons différentes méthodes GSAP, des plus simples aux plus complexes, et comment nous pouvons les utiliser pour animer des objets dans notre application. GSAP utilise un code court pour les propriétés liées aux transformations 2D et 3D.

Le to() La méthode aide à définir les valeurs de fin de notre animation, où nous voulons animer et comment cela doit se produire.

gsap.to("element", {rotation: 360, x: 100, duration: 1});

Le from() La méthode aide à définir les valeurs de départ dans notre animation. En d’autres termes, une animation vers l’arrière.

gsap.from("element", {rotation: 360, x: 100, duration: 1});

Le fromto() La méthode nous permet de définir à la fois les valeurs de début et de fin.

gsap.fromTo("element", {rotation: 360, x: 100, duration: 1});

Vous trouverez ci-dessous un exemple d’utilisation des trois méthodes GSAP pour animer une image.

Découvrez l’exemple de code complet sur Codepen.

Enfin, nous avons appris à réaliser une animation simple avec GSAP et ses méthodes. La prochaine étape consiste à utiliser GSAP pour générer une animation personnalisée. C’est ce que la partie suivante va nous présenter. Cependant, avant de passer à l’étape suivante, nous devons mettre en place notre environnement de développement et intégrer GSAP.

Configuration de l’environnement de développement

La première étape de cet article consiste à créer un nouveau projet Vue. Pour créer un nouveau projet Vue, ouvrez un terminal, accédez au dossier dans lequel nous souhaitons créer le nouveau projet et exécutez la commande ci-dessous :

npm init vue@latest

Ensuite, nous recevrons un message rapide nous demandant de confirmer certaines dépendances supplémentaires que nous souhaitons dans notre projet. La commande ci-dessus construira une structure de dossiers pour notre nouveau projet.

Intégration de GSAP dans le projet Vue

La prochaine étape consiste à intégrer et configurer GSAP dans notre projet Vue afin que nous puissions commencer. Accédez au nouveau projet que nous avons créé et utilisez la commande suivante pour définir GSAP dans notre nouveau projet :

npm install gsap –-save
or
Yarn add gsap

Après avoir installé GSAP dans notre projet Vue, nous copierons et collerons le code suivant dans notre fichier main.js pour permettre à GSAP de fonctionner globalement dans notre application.

import gsap from 'gsap'

Personnalisation des animations dans Vue avec GSAP

Dans cette étape, nous allons créer une conception simple en utilisant TailwindCSS pour le style, Vue comme framework et GSAP pour les animations. Cette section nous apprendra comment combiner les fonctionnalités et méthodes GSAP mentionnées dans les sections précédentes pour créer des animations visuellement époustouflantes pour notre conception. Pour démarrer la configuration, suivez ceci article pour configurer TailwindCSS dans notre application Vue.

  mounted: function () {
    gsap.from('.hero-image', { duration: 3, scale: 2, ease: "bounce.out" });
    gsap.fromTo(
      ".hero-text",
      {
        opacity: 0,
        x: "-100%",
      },
      {
        duration: 1.8,
        opacity: 1,
        x: 0,
        ease: "power4.inOut",
        delay: 0.3,
      }
    );
    gsap.fromTo(
      ".enrol-btn",
      {
        y: "100%",
      },
      {
        duration: 1.5,
        opacity: 1,
        y: 0,
        delay: 1.5,
      }
    );
  }

L’animation initiale dans les extraits de code ci-dessus cible un élément avec la classe hero-image; après cela, nous avons ajouté une méthode from() pour agrandir l’image sur une durée de 3 secondes. Lorsque nous définissons l’attribut scale sur 2, la taille de l’image double. Nous avons ajouté le easy méthode avec la propriété bounce.out pour donner à l’animation un effet rebondissant.

Nous avons utilisé le fromto fonction pour générer un effet de glissement avec le easy power4.inout courbe d’assouplissement et un délai de 0,3 seconde pour garantir que l’animation du texte commence après le mouvement de l’image.

Voici le résultat final de l’exemple de code ci-dessus :

Bien que GSAP puisse être un peu difficile à mettre en œuvre pour des conceptions simples, il existe divers plugins d’animation intégrés que nous pouvons utiliser pour créer une animation de base. Progrès Interface utilisateur Kendo pour Vue Animation est l’un d’eux. Interface utilisateur du Kendo Animation permet de créer ou d’animer des éléments HTML avec des transitions transparentes dans la fenêtre. Une chose unique à propos de cette bibliothèque est que nous pouvons l’utiliser en interne ou séparément pour animer nos éléments d’interface utilisateur.

Kendo UI pour Vue Animation comprend une variété de types d’animation intégrés pour nous aider à créer de superbes designs qui améliorent l’expérience utilisateur. Tu peux Essaye le pour voir si la bibliothèque vous convient.

Conclusion

L’animation est un excellent moyen de donner vie à votre application.

Dans ce tutoriel, nous avons appris ce qu’est GSAP, comment il fonctionne, comment créer une animation de base avec GSAP et comment personnaliser notre animation à l’aide du framework Vue. Ce guide devrait vous aider à démarrer avec GSAP.