Houd SplitText-regelgroepen nauwkeurig door ze opnieuw op te bouwen wanneer de tekstlay-out verandert. Gebruik automatisch splitsen voor ondersteunde triggers, voeg expliciete rebuilds toe voor typografische wijzigingen en vergelijk het resultaat met de ongesplitste browsertekst in je Mac-desktopvoorbeeld.

Deze gids is bedoeld voor iemand die een browserpagina bewerkt met GSAP SplitText en een vloeiende kop. De taak is om elke gegenereerde regelwrapper uit te lijnen met de woorden die momenteel bij die visuele regel horen, ook wanneer de breedte van de kop gelijk blijft terwijl de tekengrootte verandert.

Waarom kunnen vloeiende typografische instellingen regelgroepen achterlaten?

Een gegenereerde regelwrapper omsluit een specifieke groep woorden. Nadat de beschikbare ruimte of typografie verandert, moet die groepering mogelijk opnieuw worden opgebouwd. GSAP documenteert autoSplit: true voor het voltooien van het laden van lettertypen en breedtewijzigingen wanneer regels in de splitsing zijn opgenomen. Deze gedocumenteerde triggers vormen geen algemene watcher voor elke typografische wijziging. SplitText-documentatie

Denk aan een kop met font-size: clamp(2rem, 4vw, 4rem) in een container met een maximum van 42rem. MDN definieert clamp() als een voorkeurswaarde die door een minimum en maximum wordt begrensd. Hier volgt de voorkeursgrootte van het lettertype de viewportbreedte, zelfs nadat de container zijn maximum heeft bereikt. CSS-functie clamp()

De volgende berekening gebruikt een illustratieve root-lettergrootte van 16 CSS-pixels en gaat uit van voldoende beschikbare ruimte om de container zijn maximum te laten bereiken. Dit zijn berekende afmetingen, geen gemeten browserresultaten of voorspelde aantallen regels.

Viewportbreedte Containerbreedte na begrenzing Berekende tekengrootte
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

De container blijft even breed terwijl de letters groter worden. De praktische gevolgtrekking is dat alleen de breedte bewaken dit geval niet afdekt. Behandel een wijziging van de berekende tekengrootte als nog een reden om opnieuw op te bouwen en controleer vervolgens de resulterende woordplaatsing.

Bepaal de nauwkeurigheid aan de hand van de ongesplitste weergave van de browser bij dezelfde afmetingen en stijlen. Vereis niet dat de kop hetzelfde aantal regels behoudt: een vloeiende lay-out mag andere regels opleveren.

Stel een ongesplitste referentie op voordat je de animatie wijzigt

Maak in je lokale voorbeeld twee kopieën van een korte synthetische kop. Geef ze dezelfde breedte, hetzelfde lettertype, dezelfde grootte, hetzelfde gewicht, dezelfde spatiëring en dezelfde afbreekregels. Laat de eerste ongemoeid en pas SplitText toe op de tweede. Dankzij deze tijdelijke vergelijking wordt een verouderde groepering zichtbaar zonder aan te nemen waar een bepaald woord hoort af te breken.

Begin met gewone witruimte en tekstterugloop. De CSS Text-specificatie van het W3C beschrijft hoe white-space het samenvouwen van witruimte en zachte afbreking regelt; ook afzonderlijke regels voor regeleinden en spatiëring zijn erin vastgelegd. Een rebuild moet de beoogde regels behouden in plaats van ze te vervangen door handmatig ingevoegde regeleinden. CSS Text Module Level 3

Wacht bij een pagina met webfonts op document.fonts.ready voordat je de tekst de eerste keer splitst. MDN documenteert dat deze promise wordt opgelost nadat de relevante laad- en lay-outbewerkingen voor lettertypen zijn voltooid. Dit vormt een eerste meetpunt; het bevriest latere lay-outwijzigingen niet. FontFaceSet: ready-eigenschap

Controleer ook welk lettertype daadwerkelijk in de browser wordt gebruikt. MDN maakt onderscheid tussen gebruikte lettertypen en alle gedeclareerde lettertypen: een optioneel lettertype wordt bijvoorbeeld mogelijk niet gebruikt als het de laadperiode mist. Wachten tot alles gereed is, bewijst niet dat elk gedeclareerd lettertype daadwerkelijk als weergegeven lettertype is gebruikt. Document: fonts-eigenschap

Implementeer automatisch splitsen plus een expliciete controle op vloeiende tekengrootte

De volgende complete browsermodule maakt een ongesplitste referentie, een geanimeerde kopie en een knop Spatiëring schakelen. Gebruik een tijdelijke voorbeeldpagina in een bestaand JavaScript-project waarvan de bundler npm-imports kan oplossen, top-level await ondersteunt en de browser-entry uitvoert nadat de documentbody bestaat. Zorg dat Node.js en npm op je Mac zijn geïnstalleerd.

Installeer GSAP vanuit de projectmap met de volgende opdracht. Gebruik GSAP 3.13 of hoger voor deze callback-workflow. De installatiedocumentatie van GSAP behandelt installatie via npm en expliciete pluginregistratie. Installatie

npm install gsap

Vervang de browser-entrymodule van het tijdelijke voorbeeld door deze code. De initialisatie volgt het gedocumenteerde patroon SplitText.create(). De fade gebruikt gsap.from() om van nuldekking naar de bestaande weergave te animeren. 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();
});

De animatie wordt gemaakt binnen onSplit() en geretourneerd, zodat SplitText deze kan opruimen en synchroniseren tijdens rebuilds. GSAP documenteert deze callback-workflow in versie 3.13 en hoger. SplitText-documentatie

De toegevoegde resize-handler controleert alleen de berekende tekengrootte en vraagt om een rebuild nadat het wijzigen van de grootte is gepauzeerd. De vertraging van 150 milliseconden is een illustratieve implementatiekeuze. Dit voorbeeld streeft naar nauwkeurige groepen zodra het wijzigen van de grootte is afgerond; het garandeert geen correcte groepering tijdens elk tussenliggend frame.

De knop voor spatiëring demonstreert een tweede expliciete trigger. Deze wijzigt beide kopieën en roept vervolgens split.split() aan. GSAP documenteert dat deze methode zo nodig eerst de bestaande splitsing terugdraait. Een breedtewijziging en een wijziging van de tekengrootte kunnen in dit kleine voorbeeld ook overlappende rebuild-aanvragen veroorzaken; voeg ze samen als profilering in een grotere pagina onnodig werk laat zien. split()

De module is geslaagd voor een JavaScript-syntaxcontrole en de illustratieve afmetingen zijn berekend. Browserlay-out en animatie zijn hier niet uitgevoerd; voer de visuele controles hieronder uit in je lokale voorbeeld.

Kies rebuild-triggers op basis van wat er in je lay-out verandert

Het voorbeeld bewaakt één uitdrukking voor een vloeiende tekengrootte. Bepaal bij het aanpassen ervan welke code of lay-outevent de tekst wijzigt en plaats de rebuild op dat punt. Ga er niet van uit dat het voorbeeld niet-gerelateerde klassewijzigingen, containerafhankelijke typografie of continu geanimeerde lettertype-eigenschappen detecteert.

Wat verandert er op je pagina Aanbevolen aanpak
Breedte van het tekstelement Schakel het gedocumenteerde automatische splitsgedrag in en controleer het resultaat.
Viewportafhankelijke tekengrootte bij een vaste tekstbreedte Vergelijk de berekende grootte na het wijzigen van de grootte en bouw opnieuw op wanneer die verandert.
Een bedieningselement wijzigt de letterspatiëring, het gewicht of de lettertype-instellingen Vraag om een rebuild nadat het bedieningselement de nieuwe stijlen heeft toegepast.
Typografie hangt af van een omringende container Observeer die bepalende container en controleer de relevante berekende typografie.
De component wordt zichtbaar nadat die verborgen was Initialiseer opnieuw of bouw opnieuw op zodra de component de bedoelde gerenderde afmetingen heeft.

Voor containerafhankelijke lay-outs meldt ResizeObserver wijzigingen in elementafmetingen onafhankelijk van wijzigingen in de viewport. Observeer de container die de invoer voor de grootte levert. Een observer op alleen het tekstvak is geen melding voor elke wijziging van berekende stijlen. ResizeObserver

Bouw niet zonder onderscheid opnieuw op bij elke waargenomen hoogtewijziging. Een rebuild kan zelf de lay-out beïnvloeden. MDN documenteert cycli van resize-observers en legt uit dat het voorkomen van een feedbacklus vereist dat je de afhankelijkheid beheerst; werk naar een volgend frame uitstellen verwijdert een onderliggende oneindige cyclus niet. Vergelijk relevante invoer voordat je nog een rebuild aanvraagt. Fouten bij ResizeObserver-waarnemingen

Als de koptekst verandert, draai dan de oude splitsing terug voordat je de inhoud vervangt en initialiseer vervolgens een nieuwe instantie op basis van de nieuwe brontekst. GSAP documenteert dat revert() de oorspronkelijke inhoud van vóór het splitsen herstelt. Bewerkingen aan gegenereerde wrappers kunnen verloren gaan wanneer je daarna terugdraait. revert()

Controleer tekstterugloop zonder browservormgeving te wijzigen

Open in je Mac-browser het lokale voorbeeld en wijzig langzaam de venstergrootte, waarna je stopt. Vergelijk na afloop van de rebuild en fade het laatste woord op elke regel in beide kopieën. Herhaal dit terwijl de container zijn maximum heeft bereikt en wanneer die smal genoeg is om te krimpen. Klik bij elke grootte op Spatiëring schakelen.

Gebruik deze diagnosevolgorde wanneer de kopieën niet overeenkomen:

  1. Controleer of beide kopieën dezelfde beschikbare breedte en berekende typografie hebben.
  2. Bouw opnieuw op met de huidige grootte. Als dat het verschil oplost, onderzoek dan welke trigger ontbreekt.
  3. Als het verschil blijft bestaan, verwijder dan de stijlen van de gegenereerde regelwrappers en test opnieuw.
  4. Herstel de ongesplitste tekst en controleer of de onderliggende CSS de bedoelde tekstterugloop oplevert.
  5. Wijzig telkens één invoer voor de lay-out totdat het verschil reproduceerbaar is.

Laat de tekenvormgeving over aan de tekstengine van de browser. Het W3C specificeert omstandigheden waarin vormgeving over inlinegrenzen heen moet doorgaan en omstandigheden waarin die moet worden onderbroken, waaronder het scheiden van inline opvulling, randen of marges. Dit betekent dat wrapperstijlen invloed kunnen hebben op wat je meet. Voeg geen spatiëring tussen afzonderlijke tekenvakken toe om een eerdere schermafbeelding na te bootsen. Vormgeving over elementgrenzen heen

Tel visuele regels niet door innerText op regeleindetekens te splitsen. WHATWG definieert innerText als gerenderde tekst met verzamelregels voor tekst, expliciete regeleinden en structurele grenzen; het levert geen array met visuele regels die door zachte afbreking zijn ontstaan. Houd de ongesplitste browserweergave als vergelijkingsreferentie aan. De eigenschappen innerText en outerText

Houd rekening met de gedocumenteerde beperkingen van de bibliotheek: GSAP raadt aan text-wrap: balance niet te combineren met splitsen en geeft aan dat SplitText niet is ontworpen voor SVG-tekstknooppunten. Houd bij uitgebalanceerde koppen de tekst ongesplitst en animeer het hele element; gebruik voor regelwrappers gewone tekstterugloop op een HTML-tekstelement. Tips en beperkingen van SplitText

Je bent klaar wanneer de gesplitste kopie de ongesplitste kopie volgt bij de breedte- en typografiewijzigingen die daadwerkelijk bij jou voorkomen. Houd expliciete rebuilds dicht bij de wijzigingen die ze vereisen, behoud de referentie tijdens het diagnosticeren en verwijder de tijdelijke duplicaatkop en regelomlijningen voordat je de kop in de uiteindelijke pagina integreert.

Bronnen