Animações utilitárias para a Web
Animações utility-first para GSAP, escritas em seu HTML.
npm install glazejs gsapVersão mais recentev2.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>Na prática
Um atributo em um elemento pai anima os filhos em um breakpoint definido por você.
Escale cards filhos em telas grandes
Glaze lê cada string data-animate e a transforma em chamadas GSAP, então from:opacity-0| se torna gsap.from(element, { opacity: 0, y: 50, duration: 1 }).
No exemplo, o seletor entre colchetes anima as três divs filhas com escalonamento, e @lg só executa a animação quando a consulta de mídia lg corresponde, por meio de gsap.matchMedia. Glaze inclui apenas um breakpoint default, então lg é definido na configuração.
<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)",
},
});Com tecnologia GSAP
Cada string se transforma em tweens GSAP em uma timeline GSAP, para que GSAP cuide das animações e ScrollTrigger não precise de sintaxe extra.
Sintaxe de utilitários
Crie animações em HTML com tokens concisos e combináveis.
Variantes por breakpoint
Adicione os prefixos @sm:, @lg: aos tokens ou use qualquer breakpoint que definir como consulta de mídia na configuração. Glaze os aplica usando GSAP matchMedia.
Pronto para timelines
Encadeie ou execute movimentos em paralelo com utilitários de timeline.
Notação de ponto
Selecione propriedades aninhadas de GSAP, como scale.x-2 ou scrollTrigger.trigger-[&], usando a notação de ponto em uma animação.
Predefinições
Defina uma string de token uma vez na configuração e reutilize-a como preset-name, junto com outros tokens no mesmo elemento.
Leve
Cerca de 3 KB compactados com gzip. GSAP é uma dependência separada que você instala e fornece.
Modo de observação
Defina watch: true e Glaze executará novamente a animação de qualquer elemento adicionado ou cujos tokens mudarem, com um atraso de 500 ms, a menos que você defina debounceTime.
Explore o guia completo do Glaze, da instalação e dos primeiros passos até os fluxos de trabalho avançados e os detalhes da API.