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

GitHub

Najnovejša izdajav2.0.12024-06-05MITGSAP 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

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>

JavaScript

glaze({
  lib: { gsap: { core: gsap } },
  breakpoints: {
    default: "(min-width: 1px)",
    sm: "(min-width: 640px)",
    md: "(min-width: 768px)",
    lg: "(min-width: 1024px)",
  },
});

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

Prikaži izvorno kodo