# Animaciones para la web basadas en utilidades

Animaciones con enfoque utilitario para GSAP, escritas en tu HTML.

Terminal

```
npm install glazejs gsap
```

[Comenzar](https://glaze.dev/es/docs/)

[GitHub](https://github.com/inline0/glaze)

Última versión [v2.0.1](https://github.com/inline0/glaze/releases/tag/v2.0.1) 2024-06-05 MIT GSAP 3

JSX

```
<h1 data-animate="@lg:[&>span>span]:to:y-0|stagger-0.025">
  {"Utility-based animations for the web"
    .split(" ")
    .map((w, i, arr) => (
      <span className="inline-block overflow-hidden">
        <span className="inline-block translate-y-full">
          {w}
        </span>
        {i < arr.length - 1 ? " " : ""}
      </span>
    ))}
</h1>
```

## En la práctica

Un atributo en un elemento principal anima sus elementos secundarios en el punto de ruptura que definas.

### Escalonar la aparición de tarjetas secundarias en pantallas grandes

Glaze lee cada cadena de `data-animate` y la convierte en llamadas a GSAP, así que `from:opacity-0|y-50|duration-1` se convierte en `gsap.from(element, { opacity: 0, y: 50, duration: 1 })`.

En el ejemplo, el selector entre corchetes anima los tres elementos div secundarios con un retraso escalonado, y `@lg` solo la ejecuta mientras coincide la consulta de medios `lg`, mediante `gsap.matchMedia`. Glaze solo incluye un punto de ruptura `default`, así que `lg` se define en la configuración.

[Lee la guía de sintaxis](https://glaze.dev/es/docs/syntax/)

HTML

```
<div data-animate="@lg:[&>div]:from:opacity-0|y-50|stagger-0.1|duration-0.5|ease-power2.out">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>
```

## Con tecnología de GSAP

Cada cadena se convierte en interpolaciones GSAP en una línea de tiempo GSAP, así que GSAP se encarga de la animación y ScrollTrigger no necesita sintaxis adicional.

## Sintaxis utilitaria

Crea animaciones en HTML con tokens concisos y combinables.

## Variantes por punto de ruptura

Añade a los tokens el prefijo @sm:, @lg: o cualquier punto de ruptura que definas como consulta de medios en la configuración. Glaze los ejecuta mediante GSAP matchMedia.

## Listo para líneas de tiempo

Secuencia o ejecuta en paralelo los movimientos con utilidades para líneas de tiempo.

## Notación de puntos

Selecciona propiedades anidadas de GSAP, como scale.x-2 o scrollTrigger.trigger-[&], mediante la notación de puntos dentro de una animación.

## Preajustes

Define una cadena de tokens una sola vez en la configuración y reutilízala como preset-name junto con otros tokens en el mismo elemento.

## Ligero

Aproximadamente 3 KB comprimido con gzip. GSAP es una dependencia independiente que debes instalar y pasar como argumento.

## Modo de vigilancia

Establece watch: true y Glaze volverá a ejecutar la animación de cualquier elemento que se añada o cuyos tokens cambien, con un retraso de 500 ms, salvo que establezcas debounceTime.

Explora la guía completa de Glaze, desde la instalación y los primeros pasos hasta los flujos de trabajo avanzados y los detalles de la API.

[Leer la documentación](https://glaze.dev/es/docs/)

[Ver el código fuente](https://github.com/inline0/glaze)