lab Home
04

Text reveal — titres qui montent ligne par ligne

GSAP / SplitText

Chargement de la démo…

Le titre se révèle au chargement. Rejouez pour revoir l’entrée.

Vos titres entrent en scène au lieu d’apparaître : le visiteur lit votre message au rythme voulu.

Intensité
Performance
Léger
Mobile
Fonctionne tel quel, les lignes se recalculent à la rotation.
Accessibilité
Texte affiché directement, sans mouvement.
Idéal pour
Tous secteursCabinet / conseilCoach / formateurÉditorial

Featured :

  1. 1.Découpage en lignes avec masque natif : SplitText.create(el, { type: 'lines', mask: 'lines', autoSplit: true })
  2. 2.autoSplit recoupe au resize et au chargement des polices ; l’animation est renvoyée par onSplit(self) pour être reprise là où elle en était
  3. 3.Montée en { yPercent: 110, ease: 'expo.out', stagger: 0.08 }, puis sous-titre en fondu décalé
  4. 4.Tout passe par gsap.matchMedia() : rien ne bouge si prefers-reduced-motion: reduce
Next