GSAP

Notre point de vue sur GSAP

GSAP est devenu la référence absolue de l'animation web parce qu'aucune autre librairie ne combine performance, simplicité d'API et richesse de fonctionnalités à ce niveau. Le rachat par Webflow en 2024 et la gratuité totale de tous les plugins l'ont définitivement installé comme standard.

Pour autant, ce n'est jamais un choix par défaut chez Justa. Les Interactions Webflow natives suffisent pour 70 % des animations qu'on pose sur un site marketing. GSAP entre en scène quand on a vraiment besoin de finesse ou de comportements impossibles en natif.

Quand on choisit GSAP

• Animations scroll-driven complexes. Storytelling avec parallaxe, pinning, séquences synchronisées. ScrollTrigger fait ça mieux que tout ce que Webflow propose.
• Transitions entre pages. Effets de transition fluides entre routes Webflow. Impossible en natif sans GSAP ou équivalent.
• Micro-interactions sophistiquées. Hover states avec multiples étapes, morphing SVG, animations conditionnelles à l'état de l'utilisateur.
• Synchronisation avec le scroll smooth Lenis. GSAP et Lenis fonctionnent en duo : Lenis pour le smooth scroll, GSAP pour ce qui se déclenche pendant le scroll.

Quand on déconseille GSAP

• Les Interactions Webflow suffisent. Pour un fade-in au scroll, un slide-in de menu ou un hover button, GSAP est du sur-engineering. Le natif fait le job.
• Projet contraint perf sur mobile low-end. GSAP est performant, mais ajoute un poids JS. Sur des projets ciblant des marchés à connexions faibles, on évalue le coût-bénéfice.
• Équipe sans dev front. Maintenir des animations GSAP demande un minimum de compétences JS. Sur les projets où le client devra modifier seul, on évite.
• Site purement informationnel. Sur un site corporate ou administratif, l'animation n'est souvent pas l'enjeu. Inutile de complexifier la stack.

Comment on l'utilise concrètement chez Justa

1. ScrollTrigger pour le scroll storytelling

Notre usage le plus fréquent. Animations qui s'enchaînent au fil du scroll, sections épinglées, révélations progressives. ScrollTrigger gère tout ça avec une API claire.

2. Flip pour les transitions complexes

Pour des transitions de layout (ex : une carte qui se transforme en page détail), Flip permet d'animer les changements de DOM proprement, avec interpolation automatique.

3. Couplage avec Lenis

Sur les projets premium, on combine systématiquement Lenis (smooth scroll) et GSAP ScrollTrigger. La fluidité du scroll Lenis amplifie l'effet des animations GSAP.

4. Code organisé sur GitHub via jsDelivr ou Cloudflare

Les scripts GSAP custom sont versionnés sur GitHub et déployés via Cloudflare Pages ou jsDelivr. Pas de copy-paste dans Webflow, tout est testé et rollback-able.

Les limites qu'on gère

• Courbe d'apprentissage. GSAP est puissant, donc dense. Comprendre ScrollTrigger, Timelines, Tweens demande un investissement réel.
• Performance si mal configuré. Une animation GSAP mal pensée peut détruire l'INP. On profile systématiquement avec Chrome DevTools avant mise en prod.
• Conflit avec les Interactions Webflow. Mélanger GSAP et Webflow Interactions sur un même élément finit toujours mal. On choisit l'un ou l'autre par section.
• Accessibilité prefers-reduced-motion. Toujours respecter cette préférence utilisateur. Animations désactivées ou simplifiées si demandé par l'OS.

Alternatives qu'on connaît aussi

• Webflow Interactions natives. Notre choix par défaut sur 70 % des animations. Pas besoin de complexifier quand le natif suffit.
• Motion One. Plus léger que GSAP, suffit pour des animations simples. Pertinent quand on veut pousser sur la performance.
• Framer Motion. Excellente librairie, mais réservée à des projets React. Hors scope Webflow.
• Lottie. Pour de l'animation vectorielle complexe (illustrations animées), Lottie reste imbattable. Souvent utilisé en complément de GSAP.