Catégories
Plugin et site web

Animation de composants React avec GreenSock – Smashing Magazine

A propos de l'auteur

Blessing Krofegha est un ingénieur logiciel basé à Lagos au Nigeria, avec un désir ardent de contribuer à rendre le Web génial pour tous, en écrivant et en construisant…
Plus à propos
Bénédiction

GreenSock Animation Platform (GSAP) est un ensemble de fonctions JavaScript qui vous permettent d'interpeller une valeur / attribut / propriété CSS au fil du temps et d'insérer ces interpolations dans une chronologie pour des animations plus complexes. Dans cet article, Blessing explique comment GSAP fonctionne bien avec la bibliothèque React en intégrant ses fonctions dans un composant React pour créer un exemple de page de destination avec une variété d'animations.

Pendant les premiers jours du World Wide Web, les choses étaient plutôt statiques et ennuyeuses. Les pages Web étaient principalement basées sur la conception graphique et les mises en page du monde de l'impression jusqu'à l'introduction des animations. L’animation peut attirer et retenir l’attention des gens plus longtemps qu’une page Web statique et communiquer une idée ou un concept plus clairement et plus efficacement.

Cependant, lorsqu'elles ne sont pas bien faites, les animations peuvent entraver les interactions des utilisateurs avec votre produit et avoir un impact négatif sur la traction. La plate-forme d'animation GreenSock AKA (GSAP) est une puissante bibliothèque JavaScript qui permet aux développeurs frontaux, aux animateurs et aux concepteurs de créer des animations basées sur une chronologie performante. Il permet aux amateurs d'animation de prendre un contrôle précis de leurs séquences d'animation plutôt que de les contraindre parfois keyframe et animation propriétés offertes par CSS.

Dans cet article, je vais vous présenter certaines fonctionnalités de GSAP telles que scrollTriggers, Timelines, Easing etc, à la fin, nous allons créer une interface utilisateur intuitive en animant une application React avec ces fonctionnalités👌. Découvrez le projet fini sur codesandbox.

Cet article vous sera utile si:

  • Vous avez créé des animations sur des applications Web avec HTML, CSS et JavaScript.
  • Vous créez déjà des pages Web animées dans des applications React avec des packages tels que animate.css, React-motion, Framer-motion et React-Spring, et vous souhaitez également découvrir des alternatives.
  • Vous êtes un passionné de React et vous souhaitez créer des animations complexes sur des applications Web basées sur React.

Nous verrons comment créer une variété d'animations à partir d'un projet Web existant. Allons-y!

Remarque: Cet article suppose que vous êtes à l'aise avec HTML, CSS, JavaScript et React.js.

Qu'est-ce que GSAP?

La plate-forme d'animation GreenSock, également connue sous le nom de GSAP, est une animation de qualité professionnelle ultra haute performance pour le Web moderne qui permet aux développeurs d'animer leurs applications de manière modulaire, déclarative et réutilisable. Il est indépendant du framework et peut être utilisé dans n'importe quel projet basé sur JavaScript, il a une taille de bundle très minimale et ne gonflera pas votre application.

GSAP peut effectuer des animations de canevas, utilisées pour créer des expériences WebGL, créer des animations SVG dynamiques et une excellente prise en charge des navigateurs.

Pourquoi utiliser GSAP?

Peut-être n’êtes-vous pas encore tout à fait prêt à trahir d’autres frameworks, ou vous n’avez pas été convaincu d’embrasser les avantages de GSAP. Permettez-moi de vous donner quelques raisons pour lesquelles vous voudrez peut-être envisager le GSAP.

Vous pouvez créer des animations complexes

La bibliothèque JavaScript GSAP permet aux développeurs de créer des animations basées sur la physique simples à très complexes, comme dans le cas de ces sites, elle permet aux développeurs et aux concepteurs de séquencer le mouvement et de contrôler l'animation de manière dynamique. Il contient de nombreux plugins tels que DrawSVGPlugin, MorphSVGPlugin, etc., ce qui fait de la création d'animations SVG et d'animations 2D / 3D une réalité. Outre l'intégration de GSAP sur des éléments DOM, vous pouvez les utiliser dans des animations contextuelles WebGL / Canvas / Three.js.

De plus, la capacité d'assouplissement de GSAP est assez sophistiquée, ce qui permet de créer des effets avancés avec plusieurs beziers par rapport à l'animation CSS régulière.

Performance

GSAP a des performances impressionnantes sur différents navigateurs.

Selon l’équipe de GSAP, sur son site Web, «GSAP est 20x plus rapide que jQuery, plus GSAP est l'outil d'animation par script complet le plus rapide de la planète. C'est encore plus rapide que les animations et transitions CSS3 dans de nombreux cas. » Confirmez vous-même la comparaison de vitesse.

De plus, les animations GSAP fonctionnent sans effort sur les ordinateurs de bureau, les tablettes et les smartphones. Il n'est pas nécessaire d'ajouter une longue liste de préfixes, tout cela est pris en charge sous le capot par GSAP.

Vous pouvez découvrir d'autres avantages sur GSAP ou voir ce que Sarah Drasner comme à dire à ce sujet ici.

Inconvénients de GSAP

Êtes-vous en train de dire que je devrais toujours utiliser GSAP pour chaque projet? Bien sûr que non! J'ai l'impression qu'il n'y a qu'une seule raison pour laquelle vous pourriez ne pas vouloir utiliser GSAP. Découvrons-le!

  • GSAP est uniquement une bibliothèque d'animation basée sur JavaScript, il nécessite donc une certaine connaissance de la manipulation JavaScript et DOM pour utiliser efficacement ses méthodes et ses API. Cet inconvénient de la courbe d'apprentissage laisse encore plus de place aux complications pour un débutant débutant avec JavaScript.
  • GSAP ne prend pas en charge les animations basées sur CSS. Par conséquent, si vous recherchez une bibliothèque pour ce type d’animations, vous pouvez aussi bien utiliser keyframes dans l'animation CSS.

Si vous avez une autre raison, n'hésitez pas à la partager dans la section des commentaires.

D'accord, maintenant que vos doutes sont dissipés, passons à quelques détails concrets dans GSAP.

Principes de base du GSAP

Avant de créer notre animation à l'aide de React, familiarisons-nous avec certaines méthodes et éléments constitutifs de GSAP.

Si vous connaissez déjà les principes de base de GSAP, vous pouvez ignorer cette section et passer directement à la section du projet, où nous allons créer une inclinaison de la page de destination lors du défilement.

Tween

Une interpolation est un mouvement unique dans une animation. Dans GSAP, une interpolation a la syntaxe suivante:

TweenMax.method(element, duration, vars)

Voyons ce que représente cette syntaxe;

  1. method fait référence à la méthode GSAP avec laquelle vous souhaitez effectuer une interpolation.
  2. element est l'élément que vous souhaitez animer. Si vous souhaitez créer des interpolations pour plusieurs éléments en même temps, vous pouvez transmettre un tableau d'éléments à element.
  3. duration est la durée de votre interpolation. C'est un entier en secondes (sans le s suffixe!).
  4. vars est un objet des propriétés que vous souhaitez animer. Plus à ce sujet plus tard.

Méthodes GSAP

GSAP fournit de nombreuses méthodes pour créer des animations. Dans cet article, nous n'en mentionnerons que quelques-uns, tels que gsap.to, gsap.from, gsap.fromTo. Vous pouvez consulter d'autres méthodes intéressantes dans leur documentation. Les méthodes décrites dans cette section seront utilisées pour créer notre projet plus loin dans ce didacticiel.

Pour démontrer le to méthode la démo codepen ci-dessous montre qu'un élément avec une classe de balle 250px se déplacera à travers le x-axis en cinq secondes lorsque les composants se montent. Si aucune durée n’est donnée, une valeur par défaut de 500 millisecondes sera utilisée.

Voir le stylo (GSAP REACT DEMO1) (https://codepen.io/smashingmag/pen/LYNrzMB) de Blessing Krofegha.

Voir le Pen GSAP REACT DEMO1 de Blessing Krofegha.

Remarque: x et y-axis représentent respectivement l'axe horizontal et vertical, également dans les propriétés de transformation CSS telles que translateX et translateY ils sont représentés comme x et y pour pixel-measured transforme et xPercent et yPercent pour les transformations basées sur un pourcentage.

Pour voir l'extrait complet du code, vérifiez le terrain de jeu codepen.

La démo codepen montre comment un élément avec une classe de square est redimensionné à partir d'une échelle de 4 po 3seconds lorsque les composants se montent. Recherchez l'extrait de code complet sur ce codepen.

Voir le stylo (GSAP REACT DEMO2) (https://codepen.io/smashingmag/pen/bGpKoPV) de Blessing Krofegha.

Voir le Pen GSAP REACT DEMO2 par Blessing Krofegha.
  • gsap.fromTo() – vous permet de définir les valeurs de début et de fin d'une animation. C'est une combinaison des deux from() et to() méthode.

Voici à quoi ça ressemble;

gsap.fromTo('.ball',{opacity:0 }, {opacity: 1 , x: 200 , duration: 3 });
gsap.fromTo('.square', {opacity:0, x:200}, { opacity:1, x: 1 , duration: 3 });

Ce code animerait l'élément avec une classe de ball d'une opacité de 0 à une opacité de 1 à travers x-axis dans 3 seconds et le square la classe est animée à partir d'une opacité de 0 à 1 dans 3 seconds à travers x-axis uniquement lorsque le composant est monté. Pour voir comment le fromTo La méthode fonctionne et l'extrait de code complet, consultez la démo sur CodePen ci-dessous.

Voir le stylo (démo React GSAP FromTo) (https://codepen.io/smashingmag/pen/WNwyXex) de Blessing Krofegha.

Voir la démo de Pen React GSAP FromTo par Blessing Krofegha.

Remarque: Chaque fois que nous animons des propriétés de position, telles que left et top, nous devons nous assurer que les éléments concernés doivent avoir une propriété CSS position soit relative, absolute, ou fixed.

Assouplissement

La documentation officielle du GSAP a défini l'assouplissement comme le principal moyen de modifier le calendrier de vos Tweens. Il détermine comment un objet change de position à différents points. Ease contrôle le taux de changement de l’animation dans GSAP et est utilisé pour définir le style de l’animation d’un objet.

GSAP fournit différents types de facilités et d'options pour vous donner plus de contrôle sur la façon dont votre animation doit se comporter. Il fournit également un visualiseur de facilité pour vous aider à choisir vos paramètres de facilité préférés.

Il existe trois types de facilités, et leurs opérations varient.

  1. in() – Le mouvement commence lentement, puis s'accélère vers la fin de l'animation.
  2. out() – L'animation démarre rapidement puis ralentit à la fin de l'animation.
  3. inOut() – L'animation commence lentement, s'accélère à mi-chemin et se termine lentement.

Voir le Pen (démo React GSAP Easing) (https://codepen.io/smashingmag/pen/abNKLaE) de Blessing Krofegha.

Voir la démo Pen React GSAP Easing de Blessing Krofegha.

Dans cet exemple d'accélération, nous avons enchaîné les interpolations qui affichaient les trois types d'accélération bounce.in, bounce.out et bounce.inOut, et définissez un délai du nombre de secondes nécessaires à l'animation avant de commencer la suivante uniquement lorsque le composant est monté. Ce modèle est répétitif, dans la section suivante, nous verrons comment nous pourrions utiliser une chronologie pour mieux le faire.

Délais

UNE Chronologie agit comme un conteneur pour plusieurs préadolescents. Il anime les interpolations dans un ordre séquentiel et ne dépend pas de la durée de l'interpolation précédente. La chronologie facilite le contrôle des préadolescents dans leur ensemble et la gestion précise de leur timing.

Les chronologies peuvent être écrites en créant une instance d'une chronologie comme ceci:

gsap.timeline();

Vous pouvez également chaîner plusieurs interpolations à une chronologie de deux manières différentes, dans le code ci-dessous:

##Method 1
const tl = gsap.timeline(); // create an instance and assign it a variable
tl.add(); // add tween to timeline 
tl.to('element', {});
tl.from('element', {});

##Method 2
gsap.timeline()
    .add() // add tween to timeline 
    .to('element', {})
    .from('element', {})

Recréons l'exemple précédent avec une chronologie:

const { useRef, useEffect } = React;

const Balls = () => {
    useEffect(() => {      
    const tl = gsap.timeline();
    tl.to('#ball1', {x:1000, ease:"bounce.in", duration: 3})
    tl.to('#ball2', {x:1000, ease:"bounce.out", duration: 3, delay:3 })
    tl.to('#ball3', {x:1000, ease:"bounce.inOut", duration: 3, delay:6 })
  }, ());
}

ReactDOM.render(, document.getElementById('app'));

À l'intérieur d'un useEffect hook, nous avons créé une variable(tl) qui contient une instance d'une chronologie, ensuite nous avons utilisé le tl variable pour animer notre interpolation en séquentiel sans dépendre de l'interpolation précédente à animer, en passant les mêmes propriétés que dans l'exemple précédent. Pour obtenir l'extrait de code complet de cette démo, consultez le terrain de jeu codepen ci-dessous.

Voir la démo Pen (React GSAP (Easing with Timeline)) (https://codepen.io/smashingmag/pen/zYqaEmE) de Blessing Krofegha.

Voir la démo Pen React GSAP (Easing with Timeline) de Blessing Krofegha.

Maintenant que nous avons une idée de certains des éléments de base de GSAP, voyons comment nous pourrions créer une animation complète dans une application React typique dans la section suivante.
Commençons le vol! 🚀

Création d'une page de destination animée avec React et GSAP

Animons une application React. Assurez-vous de cloner le repo avant de commencer et de courir npm install, pour installer les dépendances.

Que construisons-nous?

Actuellement, notre page de destination contient quelques textes sur fond blanc, un menu qui ne se déroule pas, sans vraiment aucune animation. Voici ce que nous allons ajouter à la page de destination.

  • Animez le texte et le logo sur la page d'accueil afin de faciliter le montage lorsque le composant est monté.
  • Animez le menu pour qu'il se déroule lorsque l'utilisateur clique sur le menu.
  • Faire pencher les images de la page de la galerie 20deg lorsque la page défile.
Page animée
Page animée.

Découvrez la démo sur codesandbox.

Nous allons diviser le processus de notre page de destination en composants, afin qu'il soit facile à comprendre. Voici le processus;

  • Définir les méthodes d'animation,
  • Animer le texte et le logo,
  • Basculer le menu,
  • Faire pencher les images 20deg sur le défilement de la page.

Composants

  • Animate.js – Définition de toutes les méthodes d'animation,
  • Image.js – importer des images de galère,
  • Menu.js – Contient la fonctionnalité de basculement du menu,
  • Header.js – Contient des liens de navigation.

Définir les méthodes d'animation

Créer un component dossier dans le src répertoire, et créez un animate.js fichier. Copiez et collez le code suivant dedans.

import gsap from "gsap"
import { ScrollTrigger } from "gsap/ScrollTrigger";
//Animate text 
export const textIntro = elem => {
  gsap.from(elem, {
    xPercent: -20,
    opacity: 0,
    stagger: 0.2,
    duration: 2,
    scale: -1,
    ease: "back",
  });
};

Ici, nous avons importé gsap . Nous avons écrit une fonction de flèche exportée qui anime le texte sur la page de destination. Souviens-toi que gsap.from() définit les valeurs à partir desquelles un objet doit être animé. La fonction a un elem paramètre qui représente la classe qui doit être animée. Il prend quelques propriétés et attribue des valeurs telles que xPercent: -20 (transforme l'objet de -20%), ne donne à l'objet aucune opacité, rend l'objet scale par -1, fait l'objet ease de retour dans 2sec.

Pour voir si cela fonctionne, rendez-vous sur App.js et incluez le code suivant.

...
//import textIntro
import {textIntro} from "./components/Animate"

...
//using useRef hook to access the textIntro DOM
 let intro = useRef(null)
  useEffect(() => {
    textIntro(intro)
  }, ())

function Home() {
  return (
    
(intro = el)}>
The SHOPPER, is a worldclass, innovative, global online ecommerce platform, that meets your everyday daily needs.
); }

Ici, nous importons le textIntro méthode de la Aminate composant. Pour accéder au DOM, nous avions l'habitude de useRef Crochet. Nous avons créé une variable intro dont la valeur est définie sur null. Ensuite, à l'intérieur du useEffect crochet, nous avons appelé le textIntro méthode et la intro variable. À l'intérieur de notre composant domestique, dans le h5 tag, nous avons défini le ref prop et passé dans le intro variable.

Texte animé.
Texte animé.

Ensuite, nous avons un menu, mais il ne descend pas lorsque l'utilisateur clique dessus. Faisons en sorte que ça marche! À l'intérieur de Header.js Composant, ajoutez le code ci-dessous.

import React, { useState, useEffect, useRef } from "react";
import { withRouter, Link, useHistory } from "react-router-dom";
import Menu from "./Menu";
const Header = () => {
  const history = useHistory()
  let logo = useRef(null);
  //State of our Menu
  const (state, setState) = useState({
    initial: false,
    clicked: null,
    menuName: "Menu",
  });
  // State of our button
  const (disabled, setDisabled) = useState(false);
  //When the component mounts
  useEffect(() => {
    textIntro(logo);
    //Listening for page changes.
    history.listen(() => {
      setState({ clicked: false, menuName: "Menu" });
    });
  }, (history));
  //toggle menu
  const toggleMenu = () => {
    disableMenu();
    if (state.initial === false) {
      setState({
        initial: null,
        clicked: true,
        menuName: "Close",
      });
    } else if (state.clicked === true) {
      setState({
        clicked: !state.clicked,
        menuName: "Menu",
      });
    } else if (state.clicked === false) {
      setState({
        clicked: !state.clicked,
        menuName: "Close",
      });
    }
  };
  // check if out button is disabled
  const disableMenu = () => {
    setDisabled(!disabled);
    setTimeout(() => {
      setDisabled(false);
    }, 1200);
  };
  return (
    
(logo = el)}> SHOPPER.
); }; export default withRouter(Header);

Dans ce composant, nous avons défini notre état de menu et de bouton, à l'intérieur du useEffect hook, nous avons écouté les changements de page en utilisant useHistory hook, si la page change, nous définissons le clicked et menuName indiquer les valeurs à false et Menu respectivement.

Pour gérer notre menu, nous avons vérifié si la valeur de notre état initial est faux, si vrai, nous changeons la valeur de initial , clicked et menuName à null, true et Close. Sinon, nous vérifions si le bouton est cliqué, si c'est vrai, nous changerons le menuName à Menu. Ensuite, nous avons un disabledMenu fonction qui désactive notre bouton pour 1sec quand il a cliqué.

Enfin, dans notre button, nous avons attribué disabled à disabled qui est une valeur booléenne qui désactivera le bouton lorsque sa valeur est true. Et le onClick le gestionnaire du bouton est lié au toggleMenu fonction. Tout ce que nous avons fait ici était de basculer notre menu texte et passé l'état à un Menu composant, que nous créerions le plus tôt possible. Écrivons les méthodes qui feront de notre menu déroulant avant de créer le Menu composant. Dirigez-vous vers Animate.js et collez-y ce code.

....
//Open menu
export const menuShow = (elem1, elem2) => {
  gsap.from((elem1, elem2), {
    duration: 0.7,
    height: 0,
    transformOrigin: "right top",
    skewY: 2,
    ease: "power4.inOut",
    stagger: {
      amount: 0.2,
    },
  });
};
//Close menu
export const menuHide = (elem1, elem2) => {
  gsap.to((elem1, elem2), {
    duration: 0.8,
    height: 0,
    ease: "power4.inOut",
    stagger: {
      amount: 0.07,
    },
  });
};

Ici, nous avons une fonction appelée menuShow, qui incline le menu horizontalement de 2degrees, facilite le menu, décale l’animation à l’aide de stagger propriété et transforme le menu de right to top dans 0.7sec, les mêmes propriétés valent pour le menuHide fonction. Pour utiliser ces fonctions, créez Menu.js fichier dans le components et collez-y ce code.

import React, {useEffect, useRef} from 'react'
import { gsap } from "gsap"
import { Link } from "react-router-dom"
import {
  menuShow,
  menuHide,
  textIntro,
} from './Animate'
const Menu = ({ state }) => {
   //create refs for our DOM elements
  
  let menuWrapper = useRef(null)
  let show1 = useRef(null)
  let show2 = useRef(null)
  let info = useRef(null)
  useEffect(() => {
    // If the menu is open and we click the menu button to close it.
    if (state.clicked === false) {
      // If menu is closed and we want to open it.
      menuHide(show2, show1);
      // Set menu to display none
      gsap.to(menuWrapper, { duration: 1, css: { display: "none" } });
    } else if (
      state.clicked === true ||
      (state.clicked === true && state.initial === null)
    ) {
      // Set menu to display block
      gsap.to(menuWrapper, { duration: 0, css: { display: "block" } });
      //Allow menu to have height of 100%
      gsap.to((show1, show2), {
        duration: 0,
        opacity: 1,
        height: "100%"
      });
      menuShow(show1, show2);
      textIntro(info);
      
    }
  }, (state))
  
  return (
    
(menuWrapper = el)} className="hamburger-menu">
(show1 = el)} className="menu-secondary-background-color" >
(show2 = el)} className="menu-layer">
(info = el)} className="info">

Our Vision

Lorem ipsum dolor sit amet consectetur adipisicing elit....

); } export default Menu

Ce que nous avons fait dans le Menu composant était d'importer les fonctions animées, qui sont menuShow, menuHide, et textIntro. Ensuite, nous avons attribué des variables pour chaque refs pour notre DOM éléments utilisant le useRef crochet et passé null comme leurs valeurs. À l'intérieur de useEffect crochet, nous vérifions l'état du menu, si clicked est false, nous appelons le menuHide fonction, sinon, si le clicked l'état est vrai, nous appelons le menuShow fonction. Enfin, nous nous sommes assurés que le DOM les éléments concernés reçoivent leur spécificité refs qui sont menuWrapper, show1, show2. Avec cela, nous avons animé notre menu.

Voyons à quoi ça ressemble.

Menu animé.
Menu animé.

La dernière animation que nous implémenterions est de créer nos images dans notre galerie skew quand il défile. Voyons maintenant l’état de notre galerie.

Galerie sans animation.
Galerie sans animation.

Pour mettre en œuvre l'animation d'inclinaison dans notre galerie, passons à Animate.js et ajoutez-y quelques codes.

....
//Skew gallery Images
export const skewGallery = elem1 => {
  //register ScrollTrigger
  gsap.registerPlugin(ScrollTrigger);
  // make the right edge "stick" to the scroll bar. force3D: true improves performance
    gsap.set(elem1, { transformOrigin: "right center", force3D: true });
    let clamp = gsap.utils.clamp(-20, 20) // don't let the skew go beyond 20 degrees. 
    ScrollTrigger.create({
      trigger: elem1,
      onUpdate: (self) => {
        const velocity = clamp(Math.round(self.getVelocity() / 300));
        gsap.to(elem1, {
          skew: 0,
          skewY: velocity,
          ease: "power3",
          duration: 0.8,
        });
      },
    });
}

Nous avons créé une fonction appelée skewGallery, passé elem1 en tant que param, et enregistré ScrollTrigger.

ScrollTrigger est un plugin dans GSAP qui nous permet de déclencher des animations basées sur le défilement, comme dans ce cas d'inclinaison des images pendant que la page défile.

Pour que le bord droit colle à la barre de défilement, nous avons passé right center valeur à la transformOrigin propriété, nous définissons également la force3D property à true dans other pour améliorer les performances.

Nous avons déclaré un clamp variable qui calcule notre asymétrie et garantit qu'elle ne dépasse pas 20degs. À l'intérieur de ScrollTrigger objet, nous avons attribué le trigger propriété à la elem1 param, qui serait l'élément qui doit être déclenché lorsque nous appelons cette fonction. Nous avons un onUpdate fonction de rappel, à l'intérieur se trouve un velocity variable qui calcule la vitesse actuelle et la divise par 300.

Enfin, nous animons l'élément à partir de ses valeurs actuelles en définissant d'autres valeurs. Nous fixons skew être initialement à 0 et skewY être le velocity variable à 0.8.

Ensuite, nous devons appeler cette fonction dans notre App.js fichier.

....
import { skewGallery } from "./components/Animate"
function Gallery() {
  let skewImage = useRef(null);
  useEffect(() => {
    skewGallery(skewImage)
  }, ());
  return (
    
(skewImage = el)}>
) } ....

Ici, nous avons importé skewGalley de ./components/Animate, A créé un skewImage ref qui cible l'élément d'image. À l'intérieur de useEffect crochet, nous avons appelé le skewGallery fonction et passé le skewImage ref en tant que paramètre. Enfin, nous avons passé le skewImage à la ref attribuer.

Vous êtes d’accord avec moi que jusqu’à présent, ce fut un voyage vraiment cool. Voici l'aperçu sur CodeSanbox 👇

Le dépôt de support pour cet article est disponible sur Github.

Conclusion

Nous avons exploré la puissance de GSAP dans un projet React, nous n'avons fait qu'effleurer la surface dans cet article, il n'y a pas de limite à ce que vous pouvez faire avec GSAP en ce qui concerne l'animation.
Le site Web officiel de GSAP offre des conseils supplémentaires pour vous aider à acquérir une compréhension approfondie des méthodes et des plugins. Il existe de nombreuses démos qui vous épateraient avec ce que les gens ont fait avec GSAP. J'aimerais entendre votre expérience avec GSAP dans la section des commentaires.

Ressources

  1. Documentation GSAP – GSAP
  2. Guide du débutant de la plateforme d'animation GreenSock – Freecodecamp
  3. Une introduction aux animations avec l'API Greensock Animation (GSAP) – Zellwk
Éditorial fracassant(ks, ra, yk, il)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *