Variable fonts + GSAP : la stack technique qui domine le motion web en 2026

Le standard tech 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 gerè 95% des besoins de motion typographique web sans plug-in tiers ni compromis de performance.

Le glissement s'est fait silencieusement, par adoption progressive des studios qui livrent la performance. Et 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 avant 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 HTTP requests est massive.

• Animation fluide. On peut animer le poids ou la largeur en continu plutôt que de switcher entre fichiers. Le visuel 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 inégalée sur transformations DOM complexes (60fps tenu sur mobile milieu de gamme).

• API minimaliste et cohérente — les développeurs prennent l'outil en 1 jour.

• Plug-ins natifs : ScrollTrigger, MotionPath, SplitText, Flip. Ils couvrent quasi tous les cas d'usage motion sans dependances tierces.

• Compatibilité SSR. GSAP fonctionne avec Next.js, Nuxt, Remix sans complication.

• Licence devenu gratuite en 2024 pour le commercial standard. Le frein économique a saute.

ScrollTrigger : le multiplicateur

L'extension ScrollTrigger transforme GSAP d'un « anime des choses » en « orchestre toute une narration scrollable ». Les sites brand 2026 utilisent ScrollTrigger pour synchroniser typographie, images, vidéos et même audio sur le même timeline scrol.

Ce que la stack permet concrètement

Quatre patterns récurrents qu'on déploie chez Pantome :

• Typographie respirante. Un texte qui grossit subtilement au passage d'un certain scroll, puis revient. Variable font axis weight 400 → 700 → 400, durée 1.2s, easing power2.inOut.

• Révélation de paragraphe. Texte qui apparait ligne par ligne, lettres descendantes avec stagger, calibré 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 d'or

Cette stack peut tuer la performance si mal intégrée. Cinq règles non négociables :

• Charger les variable fonts en font-display: swap ou optional selon 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é non négociable.

Accessibilité : le point qui plombe les sites mal conçus

Une partie de l'audience (estimée 15–25% selon les sources) souffre soit d'un trouble vestibulaire, soit préfère consciemment un mode « reduced motion ». Toute animation typographique doit avoir une version dégradée ou désactivée via la media query @prefers-reduced-motion.

C'est souvent oublié et c'est un signal d'amateurisme immédiat pour un audit pro. Lighthouse 2026 commence à le scorer explicitement.

Quand sortir de la stack

Trois cas où cette stack 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.

• Sites à contraintes performance extrêmes (newsletter inline, AMP) → CSS pur ou rien.

Pour tout le reste — 99% des sites brand 2026 — variable fonts + GSAP + ScrollTrigger est l'outil. Et c'est ce qui fait la différence entre un site qui semble vivant et un site qui semble daté.