Animaciones para la web basadas en utilidades
Animaciones con enfoque utilitario para GSAP, escritas en tu HTML.
npm install glazejs gsapÚltima versiónv2.0.1MITGSAP 3
<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| 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.
<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>glaze({
lib: { gsap: { core: gsap } },
breakpoints: {
default: "(min-width: 1px)",
sm: "(min-width: 640px)",
md: "(min-width: 768px)",
lg: "(min-width: 1024px)",
},
});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.