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 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 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 customize its settings:
    • Motion style: Select the intensity of the motion, such as gentle or moderate.
    • Direction: Decide whether the animation should follow or invert 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. 
A screenshot of the customize panel of mouse effects.
Tip:
Click the Preview on mouse move icon  to see the effect 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?

|