# Animacije za splet na podlagi razredov pripomočkov

Animacije z uporabnimi razredi za GSAP, zapisane v vašem HTML.

Terminal

```
npm install glazejs gsap
```

[Začnite](https://glaze.dev/sl/docs/)

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

Najnovejša izdaja [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>
```

## V praksi

En atribut na nadrejenem elementu animira njegove podrejene elemente pri prelomni točki, ki jo določite.

### Kaskadni zamik kartic na velikih zaslonih

Glaze prebere vsak niz `data-animate` in ga pretvori v klice GSAP, tako da `from:opacity-0|y-50|duration-1` postane `gsap.from(element, { opacity: 0, y: 50, duration: 1 })`.

V primeru izbirnik v oglatih oklepajih animira tri podrejene elemente div z zamikom, `@lg` pa animacijo izvaja samo, ko velja medijska poizvedba `lg`, prek `gsap.matchMedia`. Glaze vključuje samo prelomno točko `default`, zato je `lg` določena v konfiguraciji.

[Preberite vodnik po sintaksi](https://glaze.dev/sl/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>
```

## Poganja GSAP

Vsak niz postane GSAP prehodov na časovnici GSAP, zato animacije izvaja GSAP, ScrollTrigger pa ne potrebuje dodatne sintakse.

## Sintaksa uporabnih razredov

Animacije pišite v HTML s kratkimi, združljivimi žetoni.

## Različice prelomnih točk

Žetone opremite s predpono @sm:, @lg: ali s katero koli prelomno točko, ki jo v konfiguraciji določite kot medijsko poizvedbo. Glaze jih izvaja prek GSAP matchMedia.

## Pripravljeno za časovnice

Zaporedno ali vzporedno izvajajte gibanje z orodji za časovnice.

## Zapis s piko

Ciljajte ugnezdene lastnosti GSAP, kot sta scale.x-2 ali scrollTrigger.trigger-[&], z zapisom s piko znotraj animacije.

## Prednastavitve

Enkrat poimenujte niz žetonov v konfiguraciji in ga znova uporabite kot preset-name skupaj z drugimi žetoni na istem elementu.

## Lahka izvedba

Približno 3 KB po stiskanju gzip. GSAP je ločena odvisnost, ki jo namestite in posredujete.

## Način spremljanja

Nastavite watch: true in Glaze znova zažene animacijo vsakega dodanega elementa ali elementa, katerega žetoni se spremenijo; ponovni zagoni so združeni v 500 ms, razen če nastavite debounceTime.

Raziščite celoten vodnik za Glaze, od namestitve in prve uporabe do naprednih delovnih postopkov in podrobnosti API-ja.

[Preberite dokumentacijo](https://glaze.dev/sl/docs/)

[Prikaži izvorno kodo](https://github.com/inline0/glaze)