Better in English?
Better in English? Switch the website language for a better experience.
Le 20 juillet 2026, Webflow a glissé une nouveauté discrète mais très attendue dans son module Interactions : le suivi continu du curseur. Concrètement, IX3 dispose désormais d'un trigger déclenché par le mouvement de la souris, capable de piloter une animation en temps réel, et pas seulement au survol ou au clic.
Jusqu'ici, pour obtenir un bouton magnétique, un effet de parallaxe au mouvement de souris ou une lueur qui suit le curseur, il fallait sortir du code GSAP sur-mesure. Webflow comble cet écart en intégrant directement les mécanismes Observer et quickSetter de GSAP dans son interface visuelle. Trois nouvelles briques arrivent avec cette mise à jour.
Ce trigger suit la position du pointeur, soit par rapport à l'élément déclencheur, soit sur l'ensemble de la fenêtre si vous le souhaitez. Il transforme cette position en une valeur de progression X et Y comprise entre 0 et 1, qui alimente ensuite votre timeline d'interaction en continu. Un lissage de 50ms est appliqué par défaut, et une position de repos (centrée, 50/50) prend le relais quand le curseur quitte la zone.
Cette action permet à d'autres éléments que le déclencheur lui-même de suivre le mouvement de la souris. Elle gère le décalage (stagger) par élément et un lissage en chaîne avec un ordre déterminé, ce qui ouvre la porte à des effets de parallaxe ou d'attraction magnétique sur plusieurs éléments simultanément.
Dernière brique : des groupes d'actions qui se déclenchent selon la distance parcourue par le curseur ou sa vitesse de déplacement. Une interaction peut donc réagir non seulement à l'endroit où se trouve le curseur, mais aussi à la manière dont il s'y est déplacé.
| Avant cette mise à jour | Avec les nouvelles actions IX3 |
|---|---|
| Effets de suivi de curseur codés en GSAP custom | Configurables visuellement dans Interactions |
| Un développeur nécessaire pour chaque variante | Autonomie designer sur la plupart des cas |
| Effets magnétiques limités ou approximés | Suivi natif, lissage et ordre gérés nativement |
| Réaction uniquement à la position | Réaction possible à la vitesse et à la distance |
On va être directs : c'est une excellente nouvelle, et pas seulement pour le côté gadget. Ces micro-interactions de suivi de curseur, quand elles sont bien dosées, sont souvent ce qui différencie un site "correct" d'un site qui donne vraiment envie de rester dessus. Un bouton qui réagit légèrement à l'approche du curseur, une image qui bouge en parallaxe subtile, ça crée une sensation de qualité immédiate, presque instinctive pour l'utilisateur.
Ce qui nous plaît particulièrement, c'est que Webflow démocratise un savoir-faire qui était jusque-là réservé aux équipes capables d'écrire du GSAP à la main. Côté agence, cela veut dire des allers-retours en moins entre design et développement, et des itérations plus rapides sur ces détails qui font toute la différence en expérience utilisateur.
Un bémol tout de même, et il est important : la facilité d'accès à ces effets peut vite devenir un piège. Un site où tout bouge au moindre mouvement de souris devient fatigant, voire nuit à l'accessibilité. Chez Mazette.co, on considère que ces animations doivent toujours servir un objectif précis : guider l'attention, renforcer une hiérarchie visuelle, ou simplement ajouter une touche de plaisir sans jamais distraire de l'action principale. C'est un outil puissant, à manier avec la même discipline qu'un bon typographe manie l'espace blanc.
Notre recommandation : testez ces nouvelles actions sur des éléments stratégiques, comme un CTA principal ou une image hero, plutôt que de saupoudrer l'effet partout. La retenue reste la meilleure amie du design premium.
Pour approfondir le sujet des animations et de leur juste dosage, notre article sur l'art subtil de donner vie aux interfaces complète bien cette actualité. Et si vous voulez voir comment on intègre ce type de détails dans des projets concrets, direction notre page webdesign.
Code
Plus de 180 entreprises sont déjà sorties de l'obscurité à nos côtés.
Avec les nouvelles actions IX3 de Webflow, il suffit d'associer un trigger Mouse Move à une action Mouse Follow sur le bouton concerné. Le mouvement du curseur pilote directement la position de l'élément, avec un lissage configurable, sans passer par du GSAP custom.
Non, plus nécessairement. Cette mise à jour intègre nativement les mécanismes Observer et quickSetter de GSAP dans l'interface Interactions. Le code reste utile pour des cas très spécifiques, mais la majorité des effets de suivi de souris sont désormais accessibles sans développeur.
Le Mouse Move trigger capte la position du curseur et la transforme en valeur de progression entre 0 et 1 pour piloter une timeline. Le Mouse Follow action permet à un ou plusieurs autres éléments de suivre ce curseur, avec un décalage et un lissage indépendants, ce qui permet des effets de parallaxe ou d'effet magnétique sur plusieurs éléments à la fois.
