Adding Mouse Move Parallax addon

Move the position of an element in relation to the cursor's movement.

Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Mouse Move Parallax is a simple add-on you can add onto elements to add a bit of playful fluid motion to your webpage. When applied, the element will move with or against the cursor as you move your mouse around.

πŸ‘πŸ½ How to apply the Mouse Move Parallax addon

Add from Top menu

  • Select the element you want to attach this addon onto

  • In the top menu, click on the addon menu

  • Search for and select Mouse Move Parallax

Add from Right-Side panel

  • Select the element you want to attach this addon onto

  • On the right-side panel, click the Addons tab

  • Search for and select Mouse Move Parallax

Add By right-clicking

  • Right-click on the element you want to attach the addon onto

  • Select Addons

  • Click Add new

  • Search for and select Mouse Move Parallax

Once the addon is applied, the configuration panel will automatically pop-up on screen so you can customize it.

Tip: A cursor pointer icon will appear next to the applied element in the layers panel, indicating that the addon is applied.

βš™οΈ Configuration options

Parameter

Description

Movement factor

Set how much the element should move (0 is no movement).

Move against cursor

Toggle to make the element move in the opposite direction of the cursor, i.e., against the mouse (the default setting is to move towards the mouse, i.e., with the mouse).

Removing a Mouse Move Parallax addon

  • In the layers panel on the left, click the Mouse Move Parallax addon (cursor icon) next to the element it is applied on

  • The addon settings panel will pop-up, click on the trash icon at the top right corner of the pop-up to remove the addon from the element.

Shared presets

You can save the settings of an addon and reuse them as many times as needed in your project, follow the steps below to learn how to save them.

  • Select the element the addon is attached to

  • Click the cursor icon next to the element in the layers panel

  • Configure the addon

  • Click on the + icon at the top of the panel

  • Write the shared style name

  • Click on the checkmark to save

Click the No shared addon preset dropdown every time you want to reuse your preset, the name you gave it to it will appear in the list.

Tip: Shared presets will only be available for the specific addon you are working with.

Copy-pasting an addon

You can also copy and paste an addon from one element to another but unlike Shared Presets the settings aren't saved and you'll have to copy the addon from the element it's attached to every time you want to reuse it.

Follow the steps below to learn how to do this.

  • Select the element the addon is attached to

  • Click the cursor icon next to the element in the layers panel

  • Click on the copy-paste icon at the top of the panel

  • Close the settings panel and select the element into which you want to paste the addon.

  • Click the copy-paste icon at the top bar

The addon will be added to the element.

Did this answer your question?