Halte SplitText-Zeilengruppen korrekt, indem du sie neu aufbaust, wenn sich das Textlayout ändert. Nutze automatisches Aufteilen für unterstützte Auslöser, füge bei Typografieänderungen explizite Neuaufbauten hinzu und vergleiche das Ergebnis in deiner Mac-Desktopvorschau mit dem ungeteilten Browsertext.

Diese Anleitung richtet sich an jemanden, der eine Browserseite mit GSAP SplitText und einer fluiden Überschrift bearbeitet. Ziel ist es, jeden generierten Zeilen-Wrapper an den Wörtern auszurichten, die aktuell zu dieser visuellen Zeile gehören – auch wenn die Breite der Überschrift gleich bleibt, während sich ihre Schriftgröße ändert.

Warum können bei fluider Typografie die Zeilengruppen veralten?

Ein generierter Zeilen-Wrapper umfasst eine bestimmte Wortgruppe. Wenn sich der verfügbare Platz oder die Typografie ändert, muss diese Gruppierung möglicherweise neu aufgebaut werden. GSAP dokumentiert autoSplit: true für den Abschluss des Ladens von Schriftarten und Breitenänderungen, wenn Zeilen Teil der Aufteilung sind. Diese dokumentierten Auslöser begründen keinen allgemeinen Beobachter für jede Typografieänderung. SplitText-Dokumentation

Betrachte eine Überschrift mit font-size: clamp(2rem, 4vw, 4rem) in einem Container, der auf 42rem begrenzt ist. MDN definiert clamp() als bevorzugten Wert, der durch einen Mindest- und Höchstwert begrenzt wird. Hier folgt die bevorzugte Schriftgröße der Viewportbreite, auch nachdem der Container seine Begrenzung erreicht hat. clamp()-CSS-Funktion

Die folgende Berechnung verwendet eine illustrative Root-Schriftgröße von 16 CSS-Pixeln und setzt voraus, dass genügend Platz verfügbar ist, damit der Container seine Begrenzung erreicht. Dies sind berechnete Abmessungen, keine gemessenen Browserergebnisse oder vorhergesagten Zeilenanzahlen.

Viewportbreite Begrenzte Containerbreite Berechnete Schriftgröße
900 CSS px 672 CSS px 36 CSS px
1200 CSS px 672 CSS px 48 CSS px
1600 CSS px 672 CSS px 64 CSS px

Der Container bleibt gleich breit, während die Buchstaben größer werden. Daraus folgt praktisch, dass eine reine Breitenüberwachung diesen Fall nicht abdeckt. Behandle die Änderung der berechneten Schriftgröße als weiteren Grund für einen Neuaufbau und prüfe anschließend die resultierende Wortplatzierung.

Definiere die Korrektheit anhand der ungeteilten Darstellung des Browsers bei denselben Abmessungen und Stilen. Verlange nicht, dass die Überschrift ihre ursprüngliche Zeilenanzahl beibehält: In einem fluiden Layout darf sie andere Zeilen ergeben.

Lege eine ungeteilte Referenz an, bevor du die Animation änderst

Erstelle in deiner lokalen Vorschau zwei Kopien einer kurzen Beispielüberschrift. Gib ihnen dieselbe Breite, Schriftart, Größe, Stärke, Laufweite und dieselben Umbruchregeln. Lass die erste unverändert und wende SplitText auf die zweite an. Dieser vorübergehende Vergleich macht veraltete Gruppierungen sichtbar, ohne vorzugeben, wo ein bestimmtes Wort umbrechen sollte.

Beginne mit normalem Leerraum und gewöhnlichem Umbruchverhalten. Die CSS-Text-Spezifikation des W3C legt fest, wie white-space das Zusammenfassen von Leerraum und weiche Zeilenumbrüche steuert; außerdem definiert sie separate Regeln für Zeilenumbrüche und Abstände. Ein Neuaufbau sollte die beabsichtigten Regeln beibehalten, statt sie durch manuell eingefügte Umbrüche zu ersetzen. CSS Text Module Level 3

Wenn die Seite Webfonts verwendet, warte vor der ersten Aufteilung auf document.fonts.ready. MDN dokumentiert, dass dieses Promise aufgelöst wird, nachdem die relevanten Schriftlade- und Layoutvorgänge abgeschlossen sind. Damit ist ein erster Messzeitpunkt festgelegt; spätere Layoutänderungen werden dadurch nicht verhindert. FontFaceSet: ready-Eigenschaft

Prüfe außerdem, welche Schrift im Browser tatsächlich verwendet wird. MDN unterscheidet verwendete von allen deklarierten Schriften: Eine optionale Schrift wird beispielsweise möglicherweise nicht verwendet, wenn sie ihr Ladefenster verpasst. Bereitschaft abzuwarten bedeutet nicht, dass jede deklarierte Schrift als gerenderte Schrift verwendet wird. Document: fonts-Eigenschaft

Kombiniere automatisches Aufteilen mit einer expliziten Prüfung der fluiden Schriftgröße

Das folgende vollständige Browsermodul erstellt eine ungeteilte Referenz, eine animierte Kopie und eine Schaltfläche Abstände umschalten. Verwende dafür eine entbehrliche Vorschauseite in einem bestehenden JavaScript-Projekt, dessen Bundler npm-Imports auflöst, Top-Level-await unterstützt und den Browser-Einstiegspunkt ausführt, nachdem der Dokument-Body vorhanden ist. Installiere Node.js und npm auf deinem Mac.

Installiere GSAP aus dem Projektverzeichnis mit dem folgenden Befehl. Verwende für diesen Callback-Ablauf GSAP 3.13 oder neuer. Die GSAP-Installationsdokumentation behandelt die Installation über npm und die explizite Registrierung von Plugins. Installation

npm install gsap

Ersetze das Browser-Einstiegsmodul der entbehrlichen Vorschau durch diesen Code. Die Initialisierung folgt dem dokumentierten Muster SplitText.create(). Der Fade verwendet gsap.from(), um von null Deckkraft zur vorhandenen Darstellung zu animieren. SplitText.create(), gsap.from()

import { gsap } from 'gsap';
import { SplitText } from 'gsap/SplitText';

gsap.registerPlugin(SplitText);

const style = document.createElement('style');
style.textContent = `
.flow-demo {
  width: min(100%, 42rem);
  font-family: system-ui, sans-serif;
}
.flow-demo h2 {
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.15;
  font-weight: 600;
  margin: 1rem 0;
  white-space: normal;
  text-wrap: wrap;
}
.flow-line { outline: 1px solid #aaa; }
`;
document.head.append(style);

const host = document.createElement('section');
host.className = 'flow-demo';
const reference = document.createElement('h2');
reference.textContent =
  'Panel Alpha holds a series of soft shapes beside Panel Beta.';
const target = reference.cloneNode(true);
const button = document.createElement('button');
button.type = 'button';
button.textContent = 'Toggle spacing';
host.append(reference, target, button);
document.body.append(host);

await document.fonts.ready;

const split = SplitText.create(target, {
  type: 'lines',
  linesClass: 'flow-line',
  autoSplit: true,
  onSplit(self) {
    return gsap.from(self.lines, {
      opacity: 0,
      duration: 0.3,
      stagger: 0.04
    });
  }
});

let timer;
let fontSize = getComputedStyle(target).fontSize;

function checkFluidSize() {
  clearTimeout(timer);
  timer = setTimeout(() => {
    const next = getComputedStyle(target).fontSize;
    if (next !== fontSize) {
      fontSize = next;
      split.split();
    }
  }, 150);
}
window.addEventListener('resize', checkFluidSize);

let spaced = false;
button.addEventListener('click', () => {
  spaced = !spaced;
  reference.style.letterSpacing = target.style.letterSpacing =
    spaced ? '0.06em' : 'normal';
  split.split();
});

Die Animation wird innerhalb von onSplit() erstellt und zurückgegeben, damit SplitText sie bereinigen und bei Neuaufbauten synchronisieren kann. GSAP dokumentiert diesen Callback-Ablauf ab Version 3.13. SplitText-Dokumentation

Der hinzugefügte Resize-Handler prüft nur die berechnete Schriftgröße und fordert einen Neuaufbau an, nachdem die Größenänderung pausiert. Die Verzögerung von 150 Millisekunden ist eine illustrative Implementierungsentscheidung. Dieses Beispiel zielt auf korrekte Gruppen, sobald die Größenänderung abgeschlossen ist; es verspricht keine korrekte Gruppierung in jedem Zwischenbild der Größenänderung.

Die Schaltfläche für Abstände zeigt einen zweiten expliziten Auslöser. Sie ändert beide Kopien und ruft anschließend split.split() auf. GSAP dokumentiert, dass diese Methode bei Bedarf zuerst die vorhandene Aufteilung zurücksetzt. Eine Breitenänderung und eine Änderung der Schriftgröße können in diesem kleinen Beispiel ebenfalls überlappende Neuaufbauanforderungen auslösen; fasse sie zusammen, falls das Profiling auf einer größeren Seite unnötigen Aufwand zeigt. split()

Das Modul hat eine JavaScript-Syntaxprüfung bestanden, und die illustrativen Abmessungsberechnungen wurden ausgeführt. Browserlayout und Animation wurden hier nicht ausgeführt; führe die visuellen Prüfungen unten in deiner lokalen Vorschau durch.

Wähle Neuaufbau-Auslöser passend zu den Änderungen deines Layouts

Das Beispiel überwacht einen einzelnen fluiden Schriftgrößenausdruck. Wenn du es anpasst, identifiziere den Code oder das Layoutereignis, das den Text ändert, und löse den Neuaufbau an dieser Stelle aus. Gehe nicht davon aus, dass das Beispiel unabhängige Klassenänderungen, containerabhängige Typografie oder fortlaufend animierte Schriftmerkmale erkennt.

Was sich auf deiner Seite ändert Empfohlene Behandlung
Breite des Textelements Aktiviere das dokumentierte automatische Aufteilen und prüfe das Ergebnis.
Viewportabhängige Schriftgröße bei fester Textbreite Vergleiche nach einer Größenänderung den berechneten Wert und baue neu auf, wenn er sich ändert.
Ein Steuerelement ändert Laufweite, Stärke oder Schrifteinstellungen Fordere einen Neuaufbau an, nachdem das Steuerelement die neuen Stile angewendet hat.
Typografie hängt von einem umgebenden Container ab Beobachte den steuernden Container und prüfe die relevante berechnete Typografie.
Die Komponente wird sichtbar, nachdem sie ausgeblendet war Initialisiere sie oder baue sie neu auf, sobald sie die vorgesehenen gerenderten Abmessungen hat.

Bei containerabhängigen Layouts meldet ResizeObserver Elementgrößenänderungen unabhängig von Änderungen der Viewportgröße. Beobachte den Container, der die Eingabe für die Größenbestimmung liefert. Ein Beobachter am Textfeld allein kann nicht als Benachrichtigung über jede berechnete Stiländerung gelten. ResizeObserver

Vermeide einen undifferenzierten Neuaufbau bei jeder beobachteten Höhenänderung. Ein Neuaufbau kann selbst das Layout beeinflussen. MDN dokumentiert Zyklen des ResizeObserver und erklärt, dass sich eine Rückkopplungsschleife nur durch Kontrolle der Abhängigkeit vermeiden lässt; die Verschiebung der Arbeit in einen weiteren Frame beseitigt keinen zugrunde liegenden Endloszyklus. Vergleiche relevante Eingaben, bevor du einen weiteren Neuaufbau anforderst. ResizeObserver-Beobachtungsfehler

Wenn sich der Überschriftentext ändert, setze die alte Aufteilung zurück, bevor du den Inhalt ersetzt, und initialisiere dann anhand des neuen Quelltexts eine neue Instanz. GSAP dokumentiert, dass revert() den ursprünglichen Inhalt vor der Aufteilung wiederherstellt. Wenn du generierte Wrapper bearbeitest und danach zurücksetzt, riskierst du, diese Änderungen zu verlieren. revert()

Prüfe Umbrüche, ohne das Text-Shaping des Browsers zu verändern

Öffne die lokale Vorschau in deinem Mac-Browser und ändere die Fenstergröße langsam, dann lass die Größenänderung enden. Vergleiche nach Abschluss des Neuaufbaus und des Fades jeweils das letzte Wort jeder Zeile in beiden Kopien. Wiederhole das bei begrenztem Container und bei einer Breite, die klein genug ist, damit er schrumpft. Klicke bei jeder Größe auf Abstände umschalten.

Verwende diese Diagnoseschritte, wenn die Kopien voneinander abweichen:

  1. Prüfe, ob beide Kopien dieselbe verfügbare Breite und berechnete Typografie haben.
  2. Baue bei der aktuellen Größe neu auf. Wenn dadurch die Abweichung verschwindet, untersuche den fehlenden Auslöser.
  3. Entferne bei weiterhin bestehender Abweichung die Stile von den generierten Zeilen-Wrappern und teste erneut.
  4. Stelle den ungeteilten Text wieder her und prüfe, ob das zugrunde liegende CSS den beabsichtigten Umbruch erzeugt.
  5. Ändere jeweils nur eine Layouteingabe, bis sich die Abweichung reproduzieren lässt.

Lass das Zeichen-Shaping innerhalb der Text-Engine des Browsers. Das W3C beschreibt Umstände, unter denen das Shaping über Inline-Grenzen hinweg fortgesetzt werden muss, und Umstände, unter denen es unterbrochen werden muss – etwa wenn Inline-Padding, -Rahmen oder -Abstände dazwischenliegen. Das bedeutet, dass Wrapper-Stile die Messgröße beeinflussen können. Füge nicht zwischen einzelnen Zeichen-Boxen Abstände ein, nur um einen früheren Screenshot nachzustellen. Shaping Across Element Boundaries

Zähle visuelle Zeilen nicht, indem du innerText an Zeilenumbruchzeichen aufteilst. WHATWG definiert innerText als gerenderten Text mit Regeln zur Erfassung von Text, expliziten Umbrüchen und strukturellen Grenzen; es stellt kein Array weich umgebrochener visueller Zeilen bereit. Verwende weiterhin die ungeteilte Browserdarstellung als Vergleichsreferenz. Die Eigenschaften innerText und outerText

Beachte die dokumentierten Grenzen der Bibliothek: GSAP rät davon ab, text-wrap: balance mit dem Aufteilen zu verwenden, und weist darauf hin, dass SplitText nicht für SVG-Textknoten entwickelt wurde. Halte den Text bei ausgewogenen Überschriften ungeteilt und animiere das ganze Element. Für Zeilen-Wrapper solltest du bei einem HTML-Textelement gewöhnlichen Umbruch verwenden. Tipps und Einschränkungen zu SplitText

Die Arbeit ist abgeschlossen, wenn die geteilte Kopie bei den tatsächlichen Breiten- und Typografieänderungen deiner Seite der ungeteilten Kopie folgt. Platziere explizite Neuaufbauten nahe bei den Änderungen, die sie erfordern, behalte die Referenz beim Diagnostizieren bei und entferne das vorübergehende Duplikat sowie die Zeilenumrisse, bevor du die Überschrift in die fertige Seite integrierst.

Quellen