Découverte de Webflow Interactions avec GSAP (Animations 2025)

Découverte de Webflow Interactions 3 (IX3) propulsé par GSAP

Bonjour à tous ! Dans ce live avec Lucas, Creative Developer chez Digidop, nous explorons la plus grande annonce de Webflow dans le domaine du design : l'intégration native de GSAP (GreenSock Animation Platform), désormais appelée IX3.

Fini les contraintes des anciennes interactions (IX2) ! Préparez-vous à animer "Anything" (la promesse de GSAP) directement dans le Designer Webflow, sans compromis sur la performance.

GSAP : L'Outil Référence des Sites Awards

• Qu'est-ce que GSAP ? C'est une librairie JavaScript considérée comme le standard de l'industrie pour les animations web, réputée pour sa performance et sa puissance.
• Historique : GSAP était auparavant utilisé via du custom code et des plugins souvent payants, une barrière pour les utilisateurs No-Code de Webflow.
• Pourquoi cette acquisition ? Le moteur d'animation historique de Webflow (IX2) était vieillissant et avait un impact négatif sur les performances des sites, surtout en cas d'animations complexes. Webflow revient à son ADN : le design animé de haute qualité.

La Nouvelle Interface d'Interactions IX3 (Démonstration)

Nous vous faisons visiter le nouveau panneau d'interactions pour comprendre comment cette intégration change la donne.

Activation & Triggers

• Activation : L'activation d'IX3 doit se faire manuellement via le panneau d'interactions.
• Nouveaux Triggers : En plus des déclencheurs classiques (Click, Hover), découvrez :
  • ScrollTrigger : Intégration native du plugin le plus populaire de GSAP pour des animations basées sur la position de scroll.
  • Custom Event : Permet de déclencher une animation IX3 via du custom code, facilitant l'organisation et la collaboration.

Ciblage des Éléments (Scalabilité Améliorée)

• Adieu la limitation de cibler uniquement par classe ou par élément.
• Nouvelles options de ciblage :
  • Ciblage via Custom Attribute (ex: data-animate="hero").
  • Ciblage via Custom Selector (sélecteurs CSS).
  • Ciblage des enfants (children), des descendants (descendants), des parents, etc.
• L'avantage : Permet de réutiliser une animation créée une seule fois sur une multitude d'éléments, rendant les projets beaucoup plus scalables et performants (moins de code JS).

Le Moteur GSAP : From, To, FromTo et Easing

• Logiques From / To : Choisir si l'animation part d'un état défini (From) vers l'état CSS par défaut de l'élément (To), ou inversement.
• Easing GSAP : Accès aux Easings avancés de GSAP (Power1, Power2, Elastic, Bounce, etc.). Ressource : Utilisez le visualiseur d'Easings de la documentation GSAP pour comprendre le comportement des courbes.

Le Stagger et le Split Text

• C'était un point faible d'IX2, mais c'est désormais une force d'IX3.
• Split Text : Option native pour décomposer un bloc de texte en <span> par Lettre, Mot ou Ligne (avec option de mask / overflow: hidden).
• Stagger : Paramètre puissant qui applique un délai progressif entre les animations des éléments (les lettres dans notre démo) en quelques clics. C'est l'outil indispensable pour les effets de texte modernes !

Ressources pour Maîtriser GSAP (Q&A)

• Ressources : Nous vous partageons les meilleures ressources pour apprendre à utiliser GSAP.
• Questions : On répond à vos questions sur les performances, les plugins payants (disponibilité) et l'avenir d'IX3.