# Animacje dla stron internetowych oparte na narzędziach

Animacje w stylu utility-first dla GSAP, zapisane w HTML.

Terminal

```
npm install glazejs gsap
```

[Rozpocznij](https://glaze.dev/pl/docs/)

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

Najnowsze wydanie [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>
```

## W praktyce

Jeden atrybut elementu nadrzędnego animuje jego elementy potomne w określonym przez Ciebie punkcie przerwania.

### Kaskadowa animacja kart potomnych na dużych ekranach

Glaze odczytuje każdy ciąg znaków `data-animate` i zamienia go na wywołania GSAP, dzięki czemu `from:opacity-0|y-50|duration-1` staje się `gsap.from(element, { opacity: 0, y: 50, duration: 1 })`.

W przykładzie selektor nawiasowy animuje trzy potomne elementy div z efektem kaskadowym, a `@lg` uruchamia animację tylko wtedy, gdy zapytanie o media `lg` jest spełnione, za pośrednictwem `gsap.matchMedia`. Glaze udostępnia tylko punkt przerwania `default`, dlatego `lg` jest zdefiniowany w konfiguracji.

[Przeczytaj przewodnik po składni](https://glaze.dev/pl/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>
```

## Oparte na GSAP

Każdy ciąg znaków tworzy animacje tween GSAP na osi czasu GSAP, więc animacją steruje GSAP, a ScrollTrigger nie wymaga dodatkowej składni.

## Składnia utility

Twórz animacje w HTML za pomocą zwięzłych, łączonych tokenów.

## Warianty punktów przerwania

Dodaj przed tokenami prefiksy @sm:, @lg: lub dowolny punkt przerwania zdefiniowany w konfiguracji jako zapytanie o media. Glaze obsługuje je za pomocą GSAP matchMedia.

## Obsługa osi czasu

Układaj animacje w sekwencje lub uruchamiaj je równolegle za pomocą narzędzi osi czasu.

## Notacja kropkowa

W animacji wskazuj za pomocą notacji kropkowej zagnieżdżone właściwości GSAP, takie jak scale.x-2 lub scrollTrigger.trigger-[&].

## Presety

Zdefiniuj ciąg tokenów raz w konfiguracji i używaj go ponownie jako preset-name wraz z innymi tokenami na tym samym elemencie.

## Lekka biblioteka

Około 3 KB po kompresji gzip. GSAP jest osobną zależnością, którą należy zainstalować i przekazać.

## Tryb obserwowania

Ustaw watch: true, a Glaze ponownie uruchomi animację każdego dodanego elementu lub elementu, którego tokeny ulegną zmianie. Ponowne uruchomienie jest opóźniane o 500 ms, chyba że ustawisz debounceTime.

Poznaj kompletny przewodnik Glaze — od instalacji i pierwszego użycia po zaawansowane przepływy pracy i szczegóły API.

[Przeczytaj dokumentację](https://glaze.dev/pl/docs/)

[Wyświetl źródło](https://github.com/inline0/glaze)