Créez de superbes animations de défilement à l'aide de Framer Motion

Introduction

Le défilement est quelque chose que nous faisons tous les jours sur nos écrans, mais avez-vous déjà pensé à la façon dont le défilement affecte l'expérience utilisateur ? Dans le monde d’aujourd’hui, le défilement est également devenu un moyen d’offrir à vos utilisateurs une expérience fluide et satisfaisante. Avec des outils comme Framer Motion, les développeurs peuvent transformer le défilement en une expérience attrayante et visuellement attrayante.

Aujourd'hui, nous allons explorer différentes manières d'animer le défilement. Nous découvrirons les types d’animations de défilement et comment elles sont utilisées. Nous comprendrons le modèle afin de pouvoir ajouter des animations de défilement à n’importe lequel de nos projets ou sites.

Nous créerons des animations dans Next.js en utilisant Framer Motion. Si vous préférez utiliser un autre framework ou bibliothèque, vous pouvez l'utiliser.

Alors, sans plus attendre, commençons.

Types d'animations de défilement

Il existe deux types d'animations de défilement :

Animations

1. Défilementliées : animations qui se déplacent ou changent en fonction de la distance parcourue, l'élément sera mis à jour en continu au fur et à mesure que vous faites défiler.

2. Animations déclenchées par défilement : une animation normale est déclenchée lorsqu'un élément entre ou sort de la fenêtre.

Avec Framer motion, vous pouvez réaliser les deux. Comprenons les deux un par un.

Animations liées au défilement

Les animations liées au défilement sont des animations dans lesquelles la progression ou le mouvement d'une animation est directement lié à la distance parcourue par l'utilisateur. Dans ce type d'animation, les éléments changent continuellement au fur et à mesure que l'utilisateur fait défiler.

Cela signifie que si vous êtes au premier point, l'animation vous suivra, et elle sera également au premier point. Et, si vous faites défiler et allez au point deux, l'animation vous suivra jusqu'à ce point.

Principales fonctionnalités

• L'animation est synchronisée avec la progression du défilement.
• Au fur et à mesure que vous faites défiler, l'animation se met à jour en temps réel en fonction de la distance parcourue.
• Ces animations peuvent impliquer le déplacement, la mise à l'échelle, la rotation ou la modification de l'apparence des éléments, généralement à l'aide des hooks useScroll et useTransform (nous en apprendrons davantage à ce sujet) dans Framer Motion.

Animation déclenchée par défilement

Les animations déclenchées par le défilement se produisent lorsqu'un élément entre ou quitte la fenêtre spécifique pendant que vous faites défiler. Cela signifie que l'animation ne démarre que lorsque l'utilisateur fait défiler vers une partie spécifique de la page.

Donc, si je suis au point un et que je définis une animation déclenchée par défilement pour le point trois, cette animation se produira au point trois. Cela signifie que l'animation ne sera déclenchée que lorsque j'atteindrai cette fenêtre (dans ce cas, il s'agit du point trois)

Pour comprendre cela, vous pouvez regarder cette vidéo ?. Ici, vous verrez que lorsque cet élément orange apparaît dans une fenêtre, cela signifie qu'il est complètement visible à l'écran et qu'à ce moment-là, il affiche une barre de navigation.

Principales fonctionnalités

• Déclenché par la position du défilement : L'animation est activée une fois qu'une position de défilement spécifique est atteinte, plutôt que d'être continuellement synchronisée avec le défilement, comme les animations liées au défilement. Ceci est généralement réalisé en utilisant des conditions telles que whileInView ou onEnter.

• Animations discrètes : Contrairement aux animations liées au défilement, les animations déclenchées par le défilement se produisent à des moments spécifiques, comme lorsqu'un élément entre ou sort du fenêtre d'affichage. Ceux-ci peuvent inclure des fondus, des diapositives ou d'autres effets visuels qui se produisent une fois que l'utilisateur fait défiler au-delà d'un certain point.

• Animations uniques ou répétables : Déclenchées par défilement les animations peuvent être configurées pour être jouées une seule fois lorsque l'élément apparaît pour la première fois, ou elles peuvent se répéter chaque fois que le l'élément entre à nouveau dans la fenêtre, selon le cas d'utilisation.
  

  <motion.div
    initial="hidden"
    whileInView="visible"
    viewport={{ once: true }}  // animation will occur only once
  />

Quelle est la prochaine étape ?

Maintenant que nous comprenons ces deux types d'animations de défilement et leurs différences, commençons à comprendre les modèles utilisés dans la création de ces animations. Cela vous permettra d'ajouter des animations de défilement à n'importe lequel de vos projets.

Dans un premier temps, nous monterons un projet pour comprendre cela pratiquement, puis nous créerons les deux types d'animations.

Configuration du projet

Commençons par configurer notre projet Next.js avec toutes les dépendances nécessaires. Je vais utiliser StalkBlitz pour ce projet mais vous pouvez également utiliser VSCode. Bien que je vais vous expliquer toutes les étapes du point de vue VSCode afin que vous puissiez suivre les étapes.

1. Créez un nouveau projet Next.js avec TypeScript :
   

   npx create-next-app@latest
   

   Lors de l'installation, vous verrez les invites suivantes :
   

      What is your project named? my-app
      Would you like to use TypeScript? No / Yes
      Would you like to use ESLint? No / Yes
      Would you like to use Tailwind CSS? No / Yes
      Would you like to use `src/` directory? No / Yes
      Would you like to use App Router? (recommended) No / Yes
      Would you like to customize the default import alias (@/*)? No / Yes
      What import alias would you like configured? @/*
   
   

2. Installer Framer Motion
   

     npm install framer-motion
   

3. Nettoyer les fichiers par défaut.
   Supprimez le code par défaut dans app/page.tsx. Nous allons repartir de zéro pour nous concentrer sur nos animations de défilement. Le fichier devrait ressembler à ceci.
   

       'use client';
   
         export default function Home() {
   
             return (
              <div>
   
              </div>
            );
          }
   
   

4. Démarrez le serveur de développement
   

     <motion.div
       initial="hidden"
       whileInView="visible"
       viewport={{ once: true }}  // animation will occur only once
     />
   
   

Créer une animation de défilement

Maintenant que notre projet est configuré, nous pouvons créer les deux types d'animations de défilement un par un. Vous pouvez commencer à écrire du code directement dans le fichier app/page.tsx ou créer un composant distinct et les importer tous dans le fichier app/page.tsx.

Création d'une animation liée au défilement

Il existe plusieurs exemples d'animation liée au défilement :

• Barre de progression de défilement : Une barre de progression circulaire ou linéaire qui se remplit à mesure que l'utilisateur fait défiler la page.

• Défilement parallaxe : Les images ou éléments d'arrière-plan se déplacent à différentes vitesses par rapport au premier plan, créant un effet de profondeur lorsque vous faites défiler.

• Éléments de fondu entrant : Le contenu apparaît en fondu au fur et à mesure que l'utilisateur fait défiler.

• Transformations d'échelle : Les éléments augmentent ou diminuent progressivement en taille en fonction de la progression du défilement. etc.

Créons quelques animations. Lors de la création d'une animation liée au défilement, vous utiliserez fréquemment ces méthodes et crochets du mouvement du framer.

1. Détection de la progression du défilement (useScroll) : suit la position de défilement de l'utilisateur, renvoyant généralement une valeur comprise entre 0 et 1 qui représente la progression vers le bas de la page.
   

   npx create-next-app@latest
   

2. Transformation des données de défilement (useTransform) : mappe la position de défilement à des propriétés d'animation spécifiques telles que l'opacité, l'échelle ou la position. Utilisez-le pour déclencher des animations telles que la décoloration, le déplacement, la rotation, la mise à l'échelle ou les changements de couleur pendant le défilement.
   

      What is your project named? my-app
      Would you like to use TypeScript? No / Yes
      Would you like to use ESLint? No / Yes
      Would you like to use Tailwind CSS? No / Yes
      Would you like to use `src/` directory? No / Yes
      Would you like to use App Router? (recommended) No / Yes
      Would you like to customize the default import alias (@/*)? No / Yes
      What import alias would you like configured? @/*
   
   

3. Animation avec des éléments de mouvement : Enveloppez les éléments cibles avec motion.div (ou tout autre composant de mouvement) et liez l'animation à la progression du défilement.
   

     npm install framer-motion
   

4. Transitions : appliquez des transitions douces pour rendre les animations fluides et naturelles.
   

       'use client';
   
         export default function Home() {
   
             return (
              <div>
   
              </div>
            );
          }
   
   

5. États initiaux et finaux : Utilisez des accessoires initiaux, d'animation ou de style pour définir l'apparence initiale des éléments et contrôlez leurs états finaux avec useTransform ou des animations liées à scrollYProgress.
   

       npm run dev
   

Faites défiler la barre de progression

Nous allons commencer par créer une barre de progression de défilement. Pour ce faire, ouvrez votre éditeur de texte, créez un nouveau composant et commencez à y écrire du code.

   const { scrollYProgress } = useScroll();

Ici, nous avons utilisé :

• useScroll : fournit la position de défilement sous forme de valeur normalisée comprise entre 0 et 1.

• useTransform : mappe la progression du défilement sur les plages de valeurs spécifiques dont nous avons besoin, que ce soit pour le tableau de bord du cercle de progression ou toute autre transformation que nous souhaitons appliquer.

• Composants de mouvement : nous utilisons motion.circle de Framer Motion pour animer la longueur du trait en temps réel en fonction du défilement.

Animation de texte à mise à l'échelle dynamique

Dans cet exemple, nous allons créer un effet de mise à l'échelle dynamique lié ​​au défilement pour un élément de texte à l'aide de Framer Motion.

1. Suivi de la progression du défilement : Semblable à la barre de progression, nous utilisons useScroll() pour obtenir la progression actuelle du défilement de la page. La valeur scrollYProgress varie de 0 en haut à 1 en cas de défilement complet.
   

     <motion.div
       initial="hidden"
       whileInView="visible"
       viewport={{ once: true }}  // animation will occur only once
     />
   
   

2. Transformation de la valeur de défilement en échelle de contrôle : Nous utilisons useTransform() pour convertir la progression du défilement en une valeur d'échelle qui change dynamiquement à mesure que l'utilisateur fait défiler. Dans ce cas, nous mappons le scrollYProgress de [0, 0.5, 1] ​​aux valeurs d'échelle [1, 2, 1], cela signifie que le texte grandira à partir de sa taille d'origine, doublera de taille au milieu du défilement et rétrécira. revenez lorsque vous atteignez le bas.
   

   npx create-next-app@latest
   

3. Animation de l'élément texte : À l'intérieur du composant motion.h1, nous utiliserons la valeur scaleValue dans la propriété style pour animer en douceur l'effet de mise à l'échelle du texte en fonction de la position de défilement. Le texte va "grandir" et "rétrécir" au fur et à mesure que l'utilisateur fait défiler.
   

      What is your project named? my-app
      Would you like to use TypeScript? No / Yes
      Would you like to use ESLint? No / Yes
      Would you like to use Tailwind CSS? No / Yes
      Would you like to use `src/` directory? No / Yes
      Would you like to use App Router? (recommended) No / Yes
      Would you like to customize the default import alias (@/*)? No / Yes
      What import alias would you like configured? @/*
   
   

4. Style de la section : Le texte est centré dans une section plein écran qui a un dégradé d'arrière-plan pour ajouter un attrait visuel. L'arrière-plan crée un dégradé fluide du violet à l'indigo, faisant ressortir davantage le texte dynamique.
   

     npm install framer-motion
   

Concepts utilisés :

• useScroll : Nous utilisons à nouveau ce hook pour suivre la progression du défilement de la page, qui sert de déclencheur à l'animation.

• useTransform : Ici, nous mappons la progression du défilement pour mettre à l'échelle les valeurs, ce qui fait que le texte s'agrandit ou se rétrécit en douceur pendant l'événement de défilement.

• Composants de mouvement : le composant motion.h1 est animé en temps réel, avec l'échelle ajustée dynamiquement à mesure que la valeur de défilement change.

Nous avons encore une fois utilisé les mêmes concepts. useScroll useTransform et motion. Voilà donc la partie de liée au défilement. Créons maintenant quelques animations déclenchées par défilement.

Création d'une animation déclenchée par le défilement

L'animation déclenchée par le défilement ne fonctionne pas avec quelques exemples. Vous pouvez lier l'animation de défilement à des composants spécifiques de la page. Par exemple, j'ai une page de destination avec deux éléments et un div contenant du texte. Actuellement, il n'y a pas d'animations sur la page, mais je souhaite ajouter des animations qui s'activent lorsque la fenêtre apparaît.

Pour cela, nous utiliserons des animations déclenchées par le défilement. Comme nous l'avons appris précédemment, les animations déclenchées par le défilement se produisent lorsqu'une fenêtre particulière apparaît. Alors, ajoutons des éléments Framer Motion à ce code.

  <motion.div
    initial="hidden"
    whileInView="visible"
    viewport={{ once: true }}  // animation will occur only once
  />

1. Nous importons le mouvement depuis framer-motion

2. Le composant entier est enveloppé dans un élément de section, il a un style de base.

3. Le qui est le premier mouvement div. Il contient le contenu principal (un titre et un paragraphe). Il utilise initial et whileInView pour créer une animation déclenchée par défilement :

   initial={{ opacité : 0, y : 50 }} : Initialement, la boîte est invisible (opacité : 0) et positionnée 50 pixels vers le bas (y : 50).
   whileInView={{ opacité : 1, y : 0 }} : lorsque l'utilisateur le fait défiler, il devient entièrement visible (opacité : 1) et se déplace vers sa position normale (y : 0).
   transition={{ durée : 0,8, easy: 'easeOut' }} : La transition prend 0,8 seconde et se déroule en douceur.

   Le contenu à l'intérieur est stylé avec les classes Tailwind, ce qui lui donne un remplissage, un arrière-plan avec une opacité de 90 %, une ombre, des coins arrondis et une largeur maximale.

4. Après cela, nous avons un deuxième div de mouvement (texte animé de haut en bas). Ce anime du texte qui descend du haut de l'écran :

   initial={{ y : -100, opacité : 0 }} : Le texte commence 100 pixels au-dessus de sa position normale et est invisible.
   whileInView={{ y : 0, opacity : 1 }} : lorsqu'il apparaît, il revient à sa position normale et devient entièrement visible.
   transition={{ delay: 0.5, duration: 0.8 }} : Il y a un délai de 0,5 seconde avant le début de l'animation, ce qui donne un effet décalé.

Le résultat final ressemblera à ceci.

Conclusion

C'est tout pour le blog d'aujourd'hui. Nous couvrons 2 types d'animations avec certaines méthodes utilisées lors de la création de ces animations comme : useScroll useTransition whileInView états initial et final et des choses comme ça.

Tout le code avec plus d'échantillons d'animation que j'ai ajoutés dans mon projet StalkBliz. Vous pouvez le consulter ici et voir plus d’exemples d’animations de défilement avec du code. Si vous souhaitez explorer plus d'accessoires, de méthodes et d'exemples d'animations de défilement, vous pouvez consulter la documentation de défilement de Framer Motion ici.

Merci d'avoir lu ce blog. Si vous en avez appris quelque chose, aimez-le et partagez-le avec vos amis et votre communauté. J'écris des blogs et partage du contenu sur JavaScript, TypeScript, Open Source et d'autres sujets liés au développement Web. N'hésitez pas à me suivre sur mes réseaux sociaux. Je te verrai dans le prochain. Merci :)

• Twitter
• LinkedIn
• GitHub

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!