tailwindcss motion

✨ tailwindcss-motion β ✨

tailwindcss-motion est un plugin CSS Tailwind créé chez RomboHQ. Il s'agit d'une bibliothèque d'animation simple mais puissante avec une syntaxe simple.

Du mouvement, sans agitation.

⚒️Installation

1. Installez le package npm

npm i -D tailwindcss-motion

2. Ajoutez dans votre tailwind.config.js

 // tailwind.config.js

export default {
     content : [ ... ] ,
     theme : {
        extend : { ... } ,
     } ,
     plugins : [ require ( 'tailwindcss-motion' ) ] ,
} ;

ou, pour utiliser ESM :

 import tailwindcssMotion from "tailwindcss-motion" ;

/** @type {import('tailwindcss').Config} */
export default {
     content : [ ... ] ,
     theme : {
          extend : { } ,
     } ,
     plugins : [ tailwindcssMotion ] ,
} ; 

Comment ça marche ?

Nous fournissons une syntaxe simple pour animer n'importe quel élément de votre projet Tailwind. Au lieu de définir des images clés personnalisées, nous fournissons des classes utilitaires pour animer chaque dimension, en ligne.

Par exemple, pour un effet de glissement et de fondu, vous avez simplement besoin motion-translate-x-in-25 motion-opacity-in-0 ou vous pouvez utiliser l'un de nos préréglages avec motion-preset-fade

Préréglages de mouvement

Nous fournissons une collection de préréglages pour animer facilement vos composants :

• Fondu : motion-preset-fade
• Glisser :
  • Droite : motion-preset-slide-right
  • Gauche : motion-preset-slide-left
  • Vers le haut : motion-preset-slide-up
  • Vers le bas : motion-preset-slide-down
• Focus : motion-preset-focus
• Se brouiller :
  • Droite : motion-preset-blur-right
  • Gauche : motion-preset-blur-left
  • Haut : motion-preset-blur-up
  • Vers le bas : motion-preset-blur-down
• Rebond : motion-preset-bounce
• Développer : motion-preset-expand
• Rétrécir : motion-preset-shrink
• Pop : motion-preset-pop
• Compresser : motion-preset-compress
• Secouer : motion-preset-shake
• Wiggle : motion-preset-wiggle
• Confettis : motion-preset-confetti
• Machine à écrire : motion-preset-typewriter-[number of characters]
• Flomoji : motion-preset-flomoji

Personnalisation des préréglages

Vous pouvez personnaliser davantage les préréglages à l’aide d’animations de base et de classes de modificateurs.

Par exemple:

• Ajouter un délai à motion-preset-fade :

 < div class =" motion-preset-fade motion-delay-500 " > </ div >

• Ajustez la durée de motion-preset-slide-right :

 < div class =" motion-preset-slide-right motion-duration-2000 " > </ div >

• Augmentez la hauteur de motion-preset-bounce :

 < div class =" motion-preset-bounce -motion-translate-y-in-150 " > </ div > 

Animations de base

Outre les préréglages, vous pouvez créer vos propres animations personnalisées en combinant ces classes de base :

• Fondu entrant : motion-opacity-in-0
• Glissez-y :
  • D'en bas : motion-translate-y-in-100
  • D'en haut : -motion-translate-y-in-100
• Mise à l'échelle : motion-scale-in-75
• Rotation vers l'intérieur :
  • À partir de 180 degrés : motion-rotate-in-180
  • À partir de -90 degrés : -motion-rotate-in-90
• Blur In : motion-blur-in-sm
• Entrée en niveaux de gris : motion-grayscale-in
• Changement de couleur d'arrière-plan : motion-bg-in-red-500
• Changement de couleur du texte : motion-text-in-blue-500

Combinaison d'animations

Vous pouvez combiner plusieurs animations sur un seul élément :

 < div
  class =" motion-scale-in-75 motion-translate-y-in-100 motion-rotate-in-90 "
> </ div >

Quitter les animations

Pour les animations de sortie, remplacez simplement in par out dans le nom de la classe.

Modificateurs

Vous pouvez personnaliser la durée, le délai et la fonction de synchronisation de n'importe quelle animation.

• Durée : motion-duration-500
• Délai : motion-delay-500
• Fonction de synchronisation : motion-timing-spring-bouncy

Par exemple:

 < div
  class =" motion-duration-2000 motion-rotate-in-180 motion-opacity-in-0 "
> </ div >

Cela applique une durée de 2 000 ms aux animations de rotation et d’opacité.

Modificateurs pour chaque propriété

Vous pouvez appliquer des modificateurs à des propriétés spécifiques à l'aide d'une barre oblique / .

Par exemple:

 < div
  class =" motion-delay-500/rotate motion-rotate-in-180 motion-opacity-in-0 "
> </ div >

Ici, le délai de 500 ms est appliqué uniquement à la rotation, pas à l'opacité.

Fonctions de facilité

Le plugin comprend des fonctions de timing personnalisées :

quelques exemples sont :

• motion-ease-spring-smooth
• motion-ease-spring-snappy
• motion-ease-spring-bouncy
• motion-ease-spring-bounciest
• motion-ease-bounce
• motion-ease-bounce
• motion-ease-in-quart

Exemples

Page de destination - https://play.tailwindcss.com/uAuVF8F1vC

Boîte de dialogue de discussion - https://play.tailwindcss.com/gjGqEKswjQ

Île dynamique à batterie faible - https://play.tailwindcss.com/tvYFbHtNNQ

Échantillons de couleurs Apple - https://play.tailwindcss.com/cvQ3Nk3v8j

C'est quoi Rombo ?

Rombo est une entreprise en phase de démarrage, qui crée des outils pour aider les entreprises à créer de belles interfaces interactives. Nous commençons avec une boîte à outils permettant aux ingénieurs, aux concepteurs et aux spécialistes du marketing créatif d'animer de manière native des flux de travail courants, comme Tailwind, Figma, Webflow, Shopify et bien d'autres à venir ! Inscrivez-vous pour les mises à jour sur notre site à https://rombo.co