universal-animations

Descripción

universal-animations es una librería ligera de animaciones CSS basada en Web Components construida con Lit 2.0.
Permite integrar animaciones sencillas y configurables en cualquier framework frontend moderno (Angular, React, Vue, Svelte, etc.) o incluso en proyectos vanilla JS, gracias a su naturaleza de Web Components.

Esta librería expone varios componentes animados listos para usar que encapsulan animaciones comunes como fade-in, slide-up, rotate, bounce y shake. Además, permite configurar duración, retraso, velocidad y cantidad de repeticiones de la animación mediante propiedades.

Características

• Animaciones predefinidas encapsuladas en Web Components.
• Compatible con cualquier framework frontend.
• Configuración dinámica de duración, retraso, easing y repeticiones.
• Fácil de usar con etiquetas HTML personalizadas.
• Construido con Lit 2, aprovechando sus ventajas de rendimiento y flexibilidad.
• Código abierto y listo para extenderse con más animaciones.

Instalación

npm install universal-animations

##Uso Básico Importa y usa los componentes en tu proyecto.

<script
  type="module"
  src="path-to-node_modules/universal-animations/dist/universal-animations.es.js"></script>

<!-- Fade In simple -->
<fade-in-animation duration="2s" easing="ease-in-out">
  <p>Este texto aparecerá con efecto fade-in</p>
</fade-in-animation>

<!-- Slide Up con retraso -->
<slide-up-animation duration="1.5s" delay="0.5s" iteration="2">
  <div>Contenido animado con slide-up</div>
</slide-up-animation>

Documentación de Componentes

1. <fade-in-animation>

Aplica un efecto de aparición gradual (fade in).

| Propiedad | Tipo | Descripción | Valor por defecto | | ----------- | ------ | ----------------------------------- | ----------------- | | duration | string | Duración de la animación (ej. "1s") | "1s" | | delay | string | Retardo antes de iniciar (ej. "0s") | "0s" | | easing | string | Función de aceleración CSS | "ease" | | iteration | string | Número de repeticiones ("infinite") | "1" |

2. <slide-up-animation>

Animación que mueve el contenido desde abajo hacia arriba mientras aparece.

| Propiedad | Tipo | Descripción | Valor por defecto | | ------------------------------- | ---- | ----------- | ----------------- | | Igual que <fade-in-animation> |

3. <rotate-animation>

Gira el contenido 360 grados.

| Propiedad | Tipo | Descripción | Valor por defecto | | ------------------------------- | ---- | ----------- | ----------------- | | Igual que <fade-in-animation> |

4. <bounce-animation>

Hace un rebote suave vertical.

| Propiedad | Tipo | Descripción | Valor por defecto | | ------------------------------- | ---- | ----------- | ----------------- | | Igual que <fade-in-animation> |

5. <shake-animation>

Mueve el contenido de lado a lado para simular un "temblor".

| Propiedad | Tipo | Descripción | Valor por defecto | | ------------------------------- | ---- | ----------- | ----------------- | | Igual que <fade-in-animation> |

Ejemplo Completo en JavaScript (con React, Angular o Vanilla JS)

import "universal-animations";

// En React
function App() {
  return (
    <fade-in-animation duration="2s" easing="ease-in-out">
      <h1>Hola desde React!</h1>
    </fade-in-animation>
  );
}