Help Center
  1. Help Center
  2. Creating your site
  3. Using the Wix Editor
  4. Designing your site
  5. Wix Editor: Adding Mouse Effects

Wix Editor: Adding Mouse Effects

3 min read
In this article
  • Adding a mouse effect to an element
  • Customizing a mouse effect
  • Removing a mouse effect
Make your design more engaging with our captivating mouse effects. Add a mouse effect to an element you want to highlight – the visitor's cursor movement triggers it automatically.  
We offer many different effects that you can adjust your site, like the ones you see below.
Examples of different mouse effects you can add to an element in the Studio Editor
Note:
As these effects require a mouse cursor, they will not play on touchscreen devices (e.g. mobile phones, tablets etc.)

Adding a mouse effect to an element

Select the element you want to animate and choose one of our mouse effects. 

To add a mouse effect:

  1. Go to your editor.
  2. Select the relevant element. 
  3. Click the Animation icon .
  4. Click Mouse Effects.
  5. Select an effect from the collection.
  6. (Optional) Click Customize to to customize settings like direction, distance and easing.
The Add Animation panel in Wix Editor, showing the available mouse effects

Customizing a mouse effect

After choosing a mouse effect, set it up to behave the way you want. Make the effect more subtle or noticeable by deciding on settings like the distance, direction, speed, easing and others. 
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.
  3. Click the Animation icon .
  4. Click Mouse Effects.
  5. Select an effect from the collection.
  6. Click Customize to to customize its settings:
    • Motion: Select the intensity of the motion, such as gentle or moderate.
    • Direction: Decide whether or follow the mouse 
      • Follow mouse: Makes the element follow the mouse cursor movement.
      • Invert mouse: Makes the element move in the opposite direction of the mouse. For example, if the mouse moves up, the element moves down. 
    • Velocity: Drag the slider to change the speed of the effect – the lower the number, the faster the effect. 
    • Movement axis: Decide if the element moves horizontally, vertically or on both axes.  
    • Pivot: Choose the reference point from which the element starts moving.
    • Blur: Use the slider to adjust the softness of the edges. For example, when the mouse hovers over the element, it dynamically resizes and sharpens.
    • Scale: Decide whether the element shrinks or expands. 
    • Power: Click the drop-down to select how powerful the animation is when it plays.
An example of the available customization options for the Tilt 3D mouse effect in Wix Editor
Tip:
Enable the Preview on mouse move toggle to see the effect directly on the canvas, without having to preview the site. 

Removing a mouse effect

You can remove a mouse effect at any time from the animation panel. 

To remove a mouse effect:

  1. Go to your editor.
  2. Select the relevant element.
  3. Click the Animation icon .
  4. Click Mouse Effects.
  5. Select None.
The Add Animation panel in Wix Editor, highlighting the option to click 'None' and remove the mouse effect

Did this help?

|
Hire a ProfessionalGet matched with a Wix Partner who can help you reach your site goals.
Start Now
In this article
  • Adding a mouse effect to an element
  • Customizing a mouse effect
  • Removing a mouse effect

Did this help?

|