GSAP pour orchestrer des transitions de thème

Changer de thème ne se résume pas à swapper des variables CSS. Avec GSAP, on peut orchestrer une transition complète : fondu du canvas, morphing des couleurs, et apparition progressive du nouveau visuel.

Le principe

GSAP anime les custom properties CSS en temps réel. On utilise gsap.to() pour interpoler --theme-bg, --theme-accent et --theme-text d’un thème à l’autre.

Timeline de transition

Une gsap.timeline() coordonne les étapes :

1. Fade-out du canvas actuel
2. Swap des variables CSS (couleurs, fonts)
3. Initialisation du nouveau canvas
4. Fade-in progressif

Résultat

L’utilisateur perçoit une transition continue plutôt qu’un switch brutal. Le coût en performance est négligeable grâce au requestAnimationFrame natif de GSAP.