Webflow | Mouse Move Animations Add Native Cursor Tracking
Webflow introduced native mouse move animations for Interactions with GSAP on July 20, 2026. The new IX3 controls let designers create magnetic buttons, cursor-following elements, parallax movement, spotlights, and glow effects through Webflow's visual interaction workflow instead of building the complete tracking system with custom code.
Webflow turns cursor position into a visual animation control
Pointer-driven effects previously required designers to write GSAP logic or add custom JavaScript to monitor movement and update an element's position. The new Mouse Move trigger brings this behavior into Interactions, making cursor position another visual input that can control an animation timeline continuously.
The system uses GSAP's Observer and quickSetter capabilities underneath the visual workflow. This gives designers access to responsive motion while keeping the setup connected to the same interface used for other Webflow interactions, properties, actions, and timelines.
Mouse Move maps pointer position to continuous progress
The Mouse Move trigger tracks the pointer relative to its trigger element by default. Designers can instead use the complete viewport when an effect needs to respond across the page rather than inside one specific section, card, button, or visual component.
Webflow converts the horizontal and vertical positions into X and Y progress values between 0 and 1, which continuously drive the connected interaction timeline. The trigger includes configurable smoothing, set to 50 milliseconds by default, and returns to a defined resting position when the cursor leaves. That resting point defaults to the center at 50/50.
Mouse Follow supports magnetic and layered effects
The Mouse Follow action allows another element to respond to the pointer instead of limiting the movement to the original trigger. A designer can use this relationship for a custom cursor detail, a magnetic button treatment, a moving spotlight, or an image that shifts as someone explores a page.
Multiple elements can use per-element stagger and chain-follow smoothing. Deterministic seeded ordering keeps their sequence consistent, making it possible to create layered trails and parallax effects in which several objects follow the same pointer with controlled differences in timing.
Interval actions respond to movement distance and speed
Interval actions add another way to interpret mouse movement. They can fire action groups after the pointer travels a defined distance or reaches a particular velocity, allowing the interaction to react to how far or how quickly someone moves instead of responding only to the current cursor coordinates.
This can make an effect feel more dynamic without requiring every response to run continuously. Designers can combine position, follow behavior, distance, and speed according to the needs of a hero section, portfolio, product page, or reusable interactive component.
REMEMBER: Keep navigation, buttons, and essential information usable without cursor movement. Test the published interaction on touch devices and with reduced-motion preferences before adding it to a reusable template.{alertSuccess}
Daisuki's Take: What This Means for Web Designers
This update moves a recognizable class of creative website effects into Webflow's native design workflow. Designers can experiment with pointer-driven motion without beginning every concept as a separate custom development task.
We would still use these interactions as supporting feedback rather than the main way someone understands or operates a page. Magnetic movement, parallax, and glow effects can strengthen a focal point, but excessive tracking may compete with content or make the interface feel unstable.
For template creators, the strongest opportunity is to build optional effects with restrained defaults and clearly organized controls. A cursor interaction becomes more reusable when its intensity can be adjusted easily and the underlying layout remains complete on devices where mouse movement is unavailable.
Sources and Recommended Links
- Mouse move animations using Interactions with GSAP | Webflow Official Updates
