Animacje dla stron internetowych oparte na narzędziach

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

Terminal

npm install glazejs gsap

Rozpocznij

GitHub

Najnowsze wydaniev2.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>

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

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)",
  },
});

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ę

Wyświetl źródło