J'ai créé un composant utilitaire React pour les animations avec Tailwind et CSS : AnimateIn

J'utilise le même modèle d'animation dans mes projets depuis un moment maintenant pour animer des éléments à l'écran. Dans sa forme la plus simple, vous auriez un élément stylisé avec une opacité de zéro, puis modifieriez le style pour avoir une opacité de un avec une transition CSS d'une seconde.

Nous pouvons nous appuyer sur cela en ajoutant d'autres propriétés de transition, en modifiant la durée, en ajoutant un délai ou en définissant un assouplissement personnalisé.

<AnimateIn/> est un composant React réutilisable que j'ai créé chaque fois que je souhaite ajouter rapidement des effets d'animation à mes projets. Composant utilitaire simple, il combine CSS Animation avec les classes Tailwind pour créer des animations fluides et accrocheuses avec un minimum d'effort.

Voyons comment il est utilisé. Après avoir importé le composant, définissez les états from et to avec les classes Tailwind. Enveloppez l’élément cible dans <AnimateIn/> pour voir l’animation prendre vie.

 import AnimateIn from '../animation/AnimateIn'; <AnimateIn from="opacity-0 scale-90" to="opacity-100 scale-100" duration={500} > <YourComponent /> </AnimateIn>

Voici un exemple légèrement plus complexe qui utilise davantage de propriétés pour animer un titre et un sous-titre.

 import AnimateIn from '../animation/AnimateIn'; <header> <AnimateIn as="h1" from="opacity-0 translate-y-32" to="opacity-100 translate-y-0" delay={500} duration={300} className="text-4xl" style={{transitionTimingFunction:"cubic-bezier(0.25, 0.4, 0.55, 1.4)"}} > My Big Headline </AnimateIn> <AnimateIn as="h2" from="opacity-0 scale-0" to="opacity-100 scale-100" delay={800} duration={500} className="text-lg" > This is a subtitle below the headline </AnimateIn> </header>

Dans l'exemple de titre, <AnimateIn/> est utilisé pour créer un effet de glissement combiné à un fondu entrant. Voici comment chaque propriété contribue à l'animation :

• as property : en définissant as="h1" , nous demandons à AnimateIn de restituer l'animation en tant qu'élément <h1> .

• propriétés from et to : la propriété from démarre le titre hors écran ( translate-y-32 , en le déplaçant de 32 unités vers le bas) et invisible ( opacity-0 ). La propriété to ramène ensuite le titre à sa position finale (retour à translate-y-0 ) et le rend entièrement visible ( opacity-100 ).

• Propriété duration : l'animation est configurée pour commencer immédiatement sans délai et s'exécute pendant 300 ms rapides.

• Propriété className : Le className="text-4xl" applique la classe utilitaire de Tailwind pour définir la taille de la police, faisant ainsi ressortir le titre.

• propriété style : la transitionTimingFunction personnalisée ( cubic-bezier(0.25, 0.4, 0.55, 1.4) ) ajoute une facilité unique à l'animation, lui donnant un effet de rebond.

Le sous-titre utilise un ensemble différent d'animations pour compléter le titre, créant ainsi un flux visuel cohérent.

• as property : ici, as="h2" restitue le composant sous la forme d'un élément <h2> , adapté à un sous-titre.

• from et to les propriétés : le sous-titre commence par être réduit à zéro ( scale-0 ) et invisible ( opacity-0 ), puis s'agrandit jusqu'à sa taille naturelle ( scale-100 ) et devient entièrement visible ( opacity-100 ). Cet effet de mise à l'échelle, associé à un fondu entrant, ajoute de la profondeur à l'animation.

• Propriétés delay et duration : le sous-titre démarre également après un délai de 800 ms, de sorte qu'il commence une fois que le titre est entièrement animé. Cette approche échelonnée garantit que chaque élément obtient son moment d'attention.

• Propriété className : className="text-lg" définit la taille de la police du sous-titre, la rendant plus petite que le titre mais toujours significative.

Pour mieux comprendre ce qui se passe, regardons le code source de <AnimateIn/> sur Github :

<AnimateIn/> utilise un hook useState pour initialiser l'état de l'animation avec la propriété from , qui doit être une ou plusieurs classes utilitaires Tailwind, préparant le terrain pour le point de départ de l'animation avant qu'une animation n'ait lieu.

Le premier hook useEffect du composant permet de respecter les préférences de l'utilisateur en matière de réduction des mouvements. En écoutant la requête multimédia (prefers-reduced-motion: reduce) , le comportement de l'animation est basé sur les paramètres système de l'utilisateur. Si un mouvement réduit est préféré, l'animation est entièrement ignorée, définissant directement l'état de l'animation sur la propriété to , permettant une expérience accessible.

Le deuxième hook useEffect est l’endroit où réside la logique d’animation. Si l'utilisateur n'a pas indiqué de préférence pour un mouvement réduit, le composant définit une minuterie qui modifie l'état d'animation from la valeur initiale to la valeur finale après le délai spécifié. Cette transition crée l'effet visuel de l'animation.

La fonction de nettoyage de ce hook (l'instruction return) efface le minuteur, empêchant ainsi les fuites de mémoire potentielles, par exemple si le composant se démonte avant la fin de l'animation.

L'appel de fonction React.createElement est le mécanisme de rendu du composant. Il crée dynamiquement un élément HTML basé sur l'accessoire as , permettant l'utilisation du composant sur différents éléments HTML. Le className est construit à l'aide de la fonction cn popularisée par shadcn , qui combine les classes utilitaires de Tailwind, le className personnalisé passé comme accessoire et l'état actuel de l'animation. Cette affectation de classe dynamique applique les styles et les transitions souhaités à l'élément.

De plus, il existe un attribut style qui peut être transmis pour définir directement les propriétés de style sur le conteneur d'animation. La transitionDuration est définie en fonction de l'accessoire duration , mais elle passe intelligemment à 0ms si l'utilisateur préfère un mouvement réduit, désactivant ainsi l'animation tout en conservant la fonctionnalité du composant.

Si vous souhaitez utiliser <AnimateIn/> dans votre propre projet et qu'il utilise déjà shadcn , alors vous avez déjà tout ce dont vous avez besoin, téléchargez simplement AnimateIn.tsx et ajoutez-le à vos composants.

Sinon, vous souhaiterez installer Tailwind ainsi que mxcn l' utilitaire utile pour fusionner les classes tailwind.

Comme shadcn, <AnimateIn/> est censé être un composant réutilisable que vous pouvez copier et coller dans vos applications et personnaliser selon vos besoins. Le code est à vous.

De plus, j'ai créé une belle page de démonstration pour jouer à la création de différentes animations avec <AnimateIn/> sur animate-in.vercel.app .

Également publié ici