Drive an animation from pointer position (mouse-position trigger) — e.g. parallax or a value that tracks the cursor across an axis.
Where: Right sidebar → Interactions → Pointer → Mouse position scrub — Add a Mouse position interaction
Key ideas
- Axis & scope: x/y/both; scope to element or window.
- Options: smooth, onlyOnHold, fromCurrentPosition, distance, keepAtLastLocation.
Steps
- Select the element to animate.
- Add a "Mouse position scrub" interaction.
- Choose the axis/scope and the animated properties.
- Tune smoothing and distance, then preview.
Map pointer movement to animation
- Choose X, Y, or both axes and scope the pointer to the element or window.
- Smoothing controls lag; distance limits how far the pointer can travel before the mapped animation reaches its end.
- Only on hold, from current position, and keep at last location alter when tracking starts and what happens after pointer movement stops.
Tune with one property first
- Add Mouse position scrub to the intended element and choose a single animated property to validate the direction.
- Test the pointer at the edges and center of the scope, then adjust distance and smoothing.
- If the motion should track scroll rather than pointer position, use Scroll scrub or Scroll inertia instead.
Tips
- Use a modest distance and smoothing value for parallax so small pointer movements do not cause large layout shifts.
Limitations and important notes
- Pointer-driven effects do not run as a substitute for touch or keyboard interaction; provide an accessible non-pointer path for essential actions.