Mouse Movement

Motion.page's MouseMovement trigger boosts interactivity by activating animations in response to mouse position, offering dynamic, cursor-driven animation for an immersive user experience.

Introduced in version 2.1 the MouseMovement trigger in Motion.page offers a compelling way to enhance interactivity by triggering animations based on the user's mouse position. This feature taps into the intuitive nature of mouse movements, allowing for real-time animation responses as the cursor moves across the screen, providing a dynamic and immersive experience for the user.

Let's take a look at the options below:

The MouseMovement trigger in Motion.page provides two distinct modes for animating elements in response to mouse movements: Axis and Distance.

Axis

In Axis mode, animations are based on the mouse's position along the horizontal (X) or vertical (Y) axes of the viewport or a specific selector. As the mouse moves from one edge to the opposite one, the animation transitions from its starting point ('From') to its end point ('To').

X-Axis: Animations that respond to horizontal mouse movement.
Y-Axis: Animations that react to vertical mouse movement.

Each axis has its own tab under the Animation section, allowing you to fine-tune the 'From' and 'To' values for the respective axis, creating a responsive animation that spans across the full length or height of the viewport or selector.

Distance

Distance mode creates animations that are sensitive to the distance of the mouse from the center of the viewport or a specified selector. In this mode, you can also choose to animate along the X or Y axis.

X-Axis: The animation's intensity or position changes based on the horizontal distance from the center.
Y-Axis: The animation varies according to the vertical distance from the center.

This mode is useful for creating depth or radial animations where elements respond to cursor movements by appearing to move closer or further away, or by changing their characteristics based on the proximity to the center point of the interaction area.

Selector

Once again, we have the option to choose here a selector of our choice by choosing its .class-name or #ID-name. By default, this will be set to the viewport.

Trigger each iteration individually

If multiple elements share the same trigger class, enabling this will ensure that interactions with one instance don't activate all related animations simultaneously. Instead, animations tied to each element will trigger independently upon interaction.

Smooth enter transition

This setting creates a seamless initiation of the animation that corresponds to the cursor's position upon entering the element's interaction zone. It ensures that the animation eases into action smoothly, without any abrupt starts, regardless of the cursor's entry point.

Custom progress start value

Before the mouse enters the selector, you can predetermine a specific progress point on the timeline for the animation to begin. Setting this value to 0 starts the animation at the beginning, while a value of 1 would start it at the end. This feature offers you control over the initial state of the animation when the mouse movement is first detected.

Custom progress leave value

When the cursor departs from the selector, the animation transitions to a designated timeline progress value that you specify. This ensures that the animation exits in a controlled manner, moving to either the start (0) or the end (1) of the animation, or any point in between, based on your preference. This option is crucial for maintaining a consistent and coherent user experience by managing the animation's end state as the interaction concludes.