Utility-basierte Animationen fürs Web
Utility-first-Animationen für GSAP, geschrieben in deinem HTML.
npm install glazejs gsapNeueste Versionv2.0.1MITGSAP 3
<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| 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.
<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>glaze({
lib: { gsap: { core: gsap } },
breakpoints: {
default: "(min-width: 1px)",
sm: "(min-width: 640px)",
md: "(min-width: 768px)",
lg: "(min-width: 1024px)",
},
});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.