# Animações utilitárias para a Web

Animações utility-first para GSAP, escritas em seu HTML.

Terminal

```
npm install glazejs gsap
```

[Comece agora](https://glaze.dev/pt/docs/)

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

Versão mais recente [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>
```

## 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|y-50|duration-1` 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.

[Leia o guia de sintaxe](https://glaze.dev/pt/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>
```

## 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.

[Leia a documentação](https://glaze.dev/pt/docs/)

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