Animated

Estava cansat de copiar keyframes d’animacions entre projectes. Cada nova base de codi començava amb el mateix copiar i enganxar: fade-in, slide-up, blur-in, bounce. Sempre lleugerament diferent. Sempre sense provar.

Així que les vaig empaquetar correctament.

Animated és un connector de Tailwind CSS 4 amb més de 75 animacions CSS fetes a mà. Una importació, zero JavaScript, funciona en qualsevol framework.

Instal·lació

pnpm add @polgubau/animated

/* index.css */
@import "tailwindcss";
@import "@polgubau/animated";

Això és tot. Sense configuració, sense registre de connectors, sense JavaScript.

Ús

<div class="animate-fade-in">Apareix gradualment en muntar-se</div>
<div class="animate-slide-up">Llisca cap amunt en muntar-se</div>
<div class="animate-blur-in animate-delay-300">Desenfocament d'entrada, 300ms de retard</div>

Suport complet d’IntelliSense a VS Code i qualsevol editor amb suport per a TypeScript:

Sense Tailwind

També funciona de manera independent. Importa el CSS i utilitza els keyframes directament:

import '@polgubau/animated';

.my-element {
  animation: slide-in-top 0.4s ease-out;
}

📋 Animacions Disponibles

@polgubau/animated ofereix una varietat d’animacions CSS categoritzades en diferents grups:

• Desenfocament (Blur):

  • animate-blur
  • animate-blur-pulse
  • animate-blur-flash
  • …

• Efecte gradual (Fade)

  • animate-fade-in
  • animate-fade-out
  • animate-fade-pulse
  • …

• Creixement (Grow)

  • animate-grow
  • animate-grow-pulse
  • …

• Batec (Pump)

  • animate-pump
  • animate-pump-pulse
  • …

• Sacsejada (Shake)

  • animate-shake-x
  • animate-shake-y
  • …

• Lliscar (Slide)

  • animate-slide-left
  • animate-slide-right
  • animate-slide-up
  • animate-slide-down
  • …

• Balanceig (Wiggle)

  • animate-wiggle
  • …

• Gir (Flip)

  • animate-flip-x
  • animate-flip-y
  • animate-flip-pulse
  • …

• Rodar (Roll)

  • animate-roll-left
  • animate-roll-right
  • animate-roll-pulse
  • …

Aquests són només alguns exemples, la llibreria té més de 75 animacions per utilitzar en el teu projecte. (Més categories properament!)

⚡ Personalització

Pots personalitzar la durada de les animacions i altres propietats utilitzant les classes d’utilitat de Tailwind:

<div class="animate-slide-left duration-1000 ease-in-out">
  Efecte de lliscar!
</div>

Configuració

Per facilitar-ne la configuració, les animacions es basen en variables CSS predefinides. Pots canviar els valors per defecte sobreescrivint les variables al teu CSS.

Aquests són els valors per defecte:

:root {
  --smaller-scale: 0.8;
  --larger-scale: 1.2;
  --pump-amount: 1.1;
  --pump-soft-amount: 1.05;
  --pump-hard-amount: 1.2;
  --pump-x-amount: 1.1;
  --pump-y-amount: 1.1;
  --pump-bounce-amount: 1.15;
  --blur-amount: 8px;
  --slide-amount: 20px;
  --slide-amount-negative: calc(-1 * var(--slide-amount));
  --rotation: 10deg;
  --rotation-negative: calc(-1 * var(--rotation));
  --small-rotation: calc(0.5 * var(--rotation));
  --small-rotation-negative: calc(-1 * var(--small-rotation));
  --shake-amount: 5px;
  --shake-amount-negative: calc(-1 * var(--shake-amount));
  --movement-distance: 10px;
  --fade-scale: 0.95;
  --rolled-degree: 360deg;
  --rolled-degree-negative: calc(-1 * var(--rolled-degree));
  --rolled-distance: 100%;
  --rolled-distance-negative: calc(-1 * var(--rolled-distance));
}

Simplement sobreescriu aquests valors al teu fitxer CSS principal sota la importació de la llibreria per personalitzar les teves animacions.

/* index.css */
@import "tailwindcss";
@import "@polgubau/animated";

:root {
  --slide-amount: 40px;
}

Ara totes les animacions de lliscament lliscaran 40px en lloc dels 20px per defecte! 😎

Com puc veure les animacions disponibles? 🔍

Simplement pots escriure animate- i veuràs totes les animacions disponibles al teu editor.

Això funcionarà automàticament si tens instal·lada l’extensió de Tailwind al teu IDE.

Però vull accedir-hi dinàmicament 💡

La llibreria exporta una matriu de totes les animacions en format JSON:

import animations from "@polgubau/animated/summary";

/* [
  "animate-blur",
  "animate-blur-flash",
  "animate-blur-pulse",
  ...
] */

Pots utilitzar aquesta matriu com vulguis. CONSELL: Això és útil per crear components d’interfície animats dinàmicament basats en props. 🌟

No estic fent servir Tailwind 🚫

@polgubau/animated és totalment compatible amb qualsevol framework CSS o CSS pur. Només cal importar la llibreria al teu fitxer CSS principal:

/* index.tsx */
import "@polgubau/animated";

Ara tindràs accés a totes les animacions de keyframes, però recorda que hauràs de crear les classes manualment.

.fade-in {
  animation: 3s infinite alternate slide-in-top;
}

Explora les animacions 🌟

Ara que ja saps com utilitzar la llibreria, submergeix-te en les animacions! Utilitza la barra lateral per explorar diferents categories i veure-les en acció. Gaudeix-ne! 🎉

Documentació 📝

La documentació està construïda utilitzant un monorepositori amb Vite i React. Utilitza TailwindCSS i compta amb animacions totalment dinàmiques, el que significa que es carreguen directament del paquet i no estan preconstruïdes a la pròpia documentació.