Variable fonts + GSAP : la stack technique qui domine le motion web en 2026
Alexandre Garbowski · CEO, Pantome · 6 avril 2026
Le standard qui s'est installé sans manifeste
Il y a 24 mois encore, animer du texte sur le web supposait Lottie, des sprites SVG animés, ou un mélange de CSS animations et de JavaScript artisanal. En 2026, la stack standardisée est devenue : variable fonts + GSAP + ScrollTrigger. Cette combinaison gère 95 % des besoins de motion typographique web sans plug-in tiers ni compromis de performance.
Le glissement s'est fait par adoption progressive des studios qui livrent la performance. La règle est claire : tout site brand « premium » publié en 2026 utilise cette stack, ou paie le prix d'une stack obsolète.
Pourquoi les variable fonts
Une variable font contient en un seul fichier ce qui demandait auparavant entre 6 et 20 fichiers séparés. Chaque axe (poids, largeur, inclinaison, axes custom) devient paramétrable en continu. Trois conséquences pratiques :
Performance. Un seul fichier chargé, pas 12. Le poids brut peut être légèrement supérieur à une police statique unique, mais l'économie en requêtes HTTP est massive.
Animation fluide. On peut animer le poids ou la largeur en continu plutôt que de switcher entre fichiers. Le résultat est radicalement plus organique.
Cohérence visuelle. Tous les états appartiennent à la même famille, dessinés pour vivre ensemble. Pas de friction entre Regular et Bold qui se ressemblent mal.
Les trois références open-source dominantes : Inter (sans-serif système), Roboto Flex (sans-serif Google maximaliste), Recursive (sans-serif et monospace combinés, axes custom).
Pourquoi GSAP plutôt qu'autre chose
GreenSock (GSAP) domine pour cinq raisons :
Performance sur transformations DOM complexes (60 fps tenu sur mobile milieu de gamme).
API minimaliste et cohérente : les développeurs prennent l'outil en une journée.
Plug-ins natifs : ScrollTrigger, MotionPath, SplitText, Flip. Ils couvrent la quasi-totalité des cas d'usage motion sans dépendances tierces.
Compatibilité SSR. GSAP fonctionne avec Next.js, Nuxt, Remix sans complication.
Licence devenue gratuite en 2024 pour le commercial standard. Le frein économique a sauté.
ScrollTrigger : le multiplicateur
L'extension ScrollTrigger transforme GSAP d'un outil d'animation en orchestrateur de narration scrollable. Les sites brand 2026 s'en servent pour synchroniser typographie, images, vidéos et audio sur le même timeline de scroll.
Ce que la stack permet concrètement
Quatre patterns récurrents déployés chez Pantome :
Typographie respirante. Un texte grossit subtilement au passage d'un seuil de scroll, puis revient. Variable font axis weight 400 → 700 → 400, durée 1,2 s, easing power2.inOut.
Révélation de paragraphe. Texte qui apparaît ligne par ligne, lettres descendantes avec stagger, calé sur la position de scroll. SplitText + ScrollTrigger.
Logotype réactif. Le logo en haut de page modifie son poids et sa largeur selon la position de scroll. Identité motion-first ancrée dans la tête de page.
Transition entre sections. Le poids du titre suivant grandit progressivement à mesure qu'on quitte la section précédente. Sensation de fluidité continue.
Performance : les règles à ne pas ignorer
Cette stack peut dégrader la performance si elle est mal intégrée. Cinq points à tenir :
Charger les variable fonts en
font-display: swapouoptionalselon le contexte.Subsetter les fonts au strict nécessaire (latin uniquement si pas de besoin multilingue).
Pré-loader la font signature au-dessus de la ligne de flottaison.
Limiter le nombre d'instances GSAP simultanées. ScrollTrigger doit
kill()les triggers hors viewport.Désactiver les animations selon
prefers-reduced-motion: reduce.
Accessibilité : le point qui trahit les sites mal conçus
Une partie de l'audience (estimée à 15 à 25 % selon les sources) souffre d'un trouble vestibulaire ou préfère un mode « reduced motion ». Toute animation typographique doit avoir une version dégradée ou désactivée via la media query @media (prefers-reduced-motion: reduce).
C'est souvent oublié, et c'est un signal d'amateurisme immédiat lors d'un audit. Lighthouse 2026 commence à le scorer explicitement.
Quand sortir de cette stack
Trois cas où variable fonts + GSAP n'est pas la bonne réponse :
Animation d'illustration vectorielle complexe : Lottie ou Rive restent meilleurs.
3D temps réel : Three.js, Spline, ou Theatre.js.
Contraintes performance extrêmes (newsletter inline, AMP) : CSS pur ou rien.
Dans tous les autres cas, variable fonts + GSAP + ScrollTrigger est l'outil. C'est ce qui sépare un site qui semble vivant d'un site qui semble daté.
