Wix Help

Studio Two Editor: Adding and Customizing Mouse Effects

3 min

Mouse effects are a fun, eye-catching way to highlight content on a site. When visitors are browsing through the site, the cursor's movement over the element triggers the effect.

There are a variety of pre-designed effects available, and you can customize them to behave exactly the way you want.

Note:

As these effects require a mouse cursor, they do not play on touchscreen devices (e.g. mobile phones, tablets etc.)


Adding a mouse effect to an element

To get started, apply a mouse effect to your chosen element from the Inspector panel.

To add a mouse effect:

  1. Go to your editor.

  2. Select the relevant element on the canvas.

  3. Click the Open Inspector icon  at the top right of the editor.
    Clicking the arrow that opens the Inspector panel in the Studio Two Editor

  4. (If not already open) Click the Motion tab.

  5. Click Mouse Effects.

  6. Click the effect you want to apply to the element.

The track mouse effect is being added to an image from the Inspector panel.
Want to remove a mouse effect?

Click None in the Mouse Effects dropdown.


Customizing a mouse effect

After applying your chosen mouse effect, customize its behavior. With settings such as the direction and and velocity, you can create fun, eye-catching effects, or subtle site interactions.

Note:
The available customization options depend on the effect you choose.

To customize a mouse effect:

  1. Go to your editor.

  2. Select the relevant element on the canvas.

  3. Click the Open Inspector icon  at the top right of the editor.
    Clicking the arrow that opens the Inspector panel in the Studio Two Editor

  4. (If not already open) Click the Motion tab.

  5. Click Mouse Effects.

  6. Hover over the applied effect and click the Customize icon .

  7. Adjust the animation with the options:

    • Direction: Decide whether the effect follows the mouse / cursor, or moves in the opposite direction (invert).

    • Movement axis: Decide if the element moves horizontally, vertically or on both axes.  

    • Distance: Choose how far the element can move (in px).

    • Velocity: Use the slider to change the effect's speed; the higher the number, the faster the effect.

    • Easing: Set the effect's easing: Linear, Ease Out Back, or Ease Out.

    • Angle: Decide how much the element's angle changes as visitors interact with it. A higher angle provides a stronger 3D effect on the site.

    • Perspective: Choose how much the perspective of the elements shift as visitors interact with it. A lower value will result in a more intensive 3D effect than a higher value.

    • Scale: Set the scale of the element during the effect, relative to its original size. Setting a smaller scale for example, means the element shrinks as visitors interact with it.

    • Blur: Set the intensity of the blur effect.

The mouse effect is being customized in the Inspector. The cursor is clicking the velocity slider.
Tip:

Enable Preview on mouse move to see the effect directly on the canvas, without having to preview the site. 

A cropped image of the Inspector, highlighting the Preview on mouse move option.

Hire a ProfessionalGet matched with a Wix Partner who can help you reach your site goals.