# Utility-basierte Animationen fürs Web

Utility-first-Animationen für GSAP, geschrieben in deinem HTML.

Terminal

```
npm install glazejs gsap
```

[Erste Schritte](https://glaze.dev/de/docs/)

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

Neueste Version [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>
```

## In der Praxis

Ein Attribut auf einem übergeordneten Element animiert dessen untergeordnete Elemente an einem von dir festgelegten Breakpoint.

### Staffele untergeordnete Karten auf großen Bildschirmen

Glaze liest jeden `data-animate`-String und wandelt ihn in GSAP-Aufrufe um, sodass `from:opacity-0|y-50|duration-1` zu `gsap.from(element, { opacity: 0, y: 50, duration: 1 })` wird.

Im Beispiel animiert der Selektor in Klammern die drei untergeordneten div-Elemente mit einem Stagger, und `@lg` führt die Animation nur aus, solange die Media Query `lg` zutrifft, und zwar über `gsap.matchMedia`. Glaze enthält nur einen `default`-Breakpoint, daher wird `lg` in der Konfiguration definiert.

[Syntaxanleitung lesen](https://glaze.dev/de/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>
```

## Mit GSAP betrieben

Jeder String wird zu GSAP-Tweens in einer GSAP-Timeline, sodass GSAP die Animation übernimmt und ScrollTrigger keine zusätzliche Syntax benötigt.

## Utility-Syntax

Erstelle Animationen in HTML mit prägnanten, kombinierbaren Tokens.

## Breakpoint-Varianten

Stelle den Tokens @sm:, @lg: oder einen beliebigen Breakpoint voran, den du in der Konfiguration als Media Query definierst. Glaze führt sie über GSAP matchMedia aus.

## Für Timelines bereit

Sequenziere oder parallelisiere Bewegungen mit Timeline-Utilities.

## Punktnotation

Ziele innerhalb einer Animation mit Punktnotation auf verschachtelte GSAP-Eigenschaften wie scale.x-2 oder scrollTrigger.trigger-[&].

## Voreinstellungen

Definiere einen Token-String einmal in der Konfiguration und verwende ihn als preset-name zusammen mit anderen Tokens auf demselben Element erneut.

## Leichtgewichtig

Etwa 3 KB im Gzip-Format. GSAP ist eine separate Abhängigkeit, die du installierst und übergibst.

## Watch-Modus

Setze watch: true, damit Glaze die Animation für jedes hinzugefügte Element oder jedes Element, dessen Tokens sich ändern, erneut ausführt. Die Ausführung wird 500 ms verzögert, sofern du debounceTime nicht festlegst.

Entdecke den vollständigen Glaze-Leitfaden – von der Installation und den ersten Schritten bis hin zu fortgeschrittenen Workflows und API-Details.

[Dokumentation lesen](https://glaze.dev/de/docs/)

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