Better in English?
Better in English? Switch the website language for a better experience.
Le 20 juillet 2026, Webflow a glisse une nouveaute discrete mais tres attendue dans son module Interactions : le suivi continu du curseur. Concretement, IX3 dispose desormais d'un trigger declenche par le mouvement de la souris, capable de piloter une animation en temps reel, et pas seulement au survol ou au clic.
Jusqu'ici, pour obtenir un bouton magnetique, 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 ecart en integrant directement les mecanismes Observer et quickSetter de GSAP dans son interface visuelle. Trois nouvelles briques arrivent avec cette mise a jour.
Ce trigger suit la position du pointeur, soit par rapport a l'element declencheur, soit sur l'ensemble de la fenetre 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 applique par defaut, et une position de repos (centree, 50/50) prend le relais quand le curseur quitte la zone.
Cette action permet a d'autres elements que le declencheur lui-meme de suivre le mouvement de la souris. Elle gere le decalage (stagger) par element et un lissage en chaine avec un ordre determine, ce qui ouvre la porte a des effets de parallaxe ou d'attraction magnetique sur plusieurs elements simultanement.
Derniere brique : des groupes d'actions qui se declenchent selon la distance parcourue par le curseur ou sa vitesse de deplacement. Une interaction peut donc reagir non seulement a l'endroit ou se trouve le curseur, mais aussi a la maniere dont il s'y est deplace.
| Avant cette mise a jour | Avec les nouvelles actions IX3 |
|---|---|
| Effets de suivi de curseur codes en GSAP custom | Configurables visuellement dans Interactions |
| Un developpeur necessaire pour chaque variante | Autonomie designer sur la plupart des cas |
| Effets magnetiques limites ou approximes | Suivi natif, lissage et ordre geres nativement |
| Reaction uniquement a la position | Reaction possible a la vitesse et a la distance |
On va etre directs : c'est une excellente nouvelle, et pas seulement pour le cote gadget. Ces micro-interactions de suivi de curseur, quand elles sont bien dosees, sont souvent ce qui differencie un site "correct" d'un site qui donne vraiment envie de rester dessus. Un bouton qui reagit legerement a l'approche du curseur, une image qui bouge en parallaxe subtile, ca cree une sensation de qualite immediate, presque instinctive pour l'utilisateur.
Ce qui nous plait particulierement, c'est que Webflow democratise un savoir-faire qui etait jusque-la reserve aux equipes capables d'ecrire du GSAP a la main. Cote agence, cela veut dire des allers-retours en moins entre design et developpement, et des iterations plus rapides sur ces details qui font toute la difference en experience utilisateur.
Un bemol tout de meme, et il est important : la facilite d'acces a ces effets peut vite devenir un piege. Un site ou tout bouge au moindre mouvement de souris devient fatigant, voire nuit a l'accessibilite. Chez Mazette.co, on considere que ces animations doivent toujours servir un objectif precis : guider l'attention, renforcer une hierarchie visuelle, ou simplement ajouter une touche de plaisir sans jamais distraire de l'action principale. C'est un outil puissant, a manier avec la meme discipline qu'un bon typographe manie l'espace blanc.
Notre recommandation : testez ces nouvelles actions sur des elements strategiques, comme un CTA principal ou une image hero, plutot 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 complete bien cette actualite. Et si vous voulez voir comment on integre ce type de details dans des projets concrets, direction notre page webdesign.
Code
Plus de 120 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 a une action Mouse Follow sur le bouton concerne. Le mouvement du curseur pilote directement la position de l'element, avec un lissage configurable, sans passer par du GSAP custom.
Non, plus necessairement. Cette mise a jour integre nativement les mecanismes Observer et quickSetter de GSAP dans l'interface Interactions. Le code reste utile pour des cas tres specifiques, mais la majorite des effets de suivi de souris sont desormais accessibles sans developpeur.
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 a un ou plusieurs autres elements de suivre ce curseur, avec un decalage et un lissage independants, ce qui permet des effets de parallaxe ou d'effet magnetique sur plusieurs elements a la fois.
