How to Use Cursor Move Effect in BricksFly

Cursor Move Effect in BricksFly lets you add smooth mouse-based movement to any selected Element in Bricks. You can control the movement area, adjust horizontal and vertical motion, set the duration, and add custom CSS to match your design style.

 Requirement 

Make sure you have installed:

• Bricks Theme 
• BricksFly Pro

How To Activate Cursor Move Effect In BricksFly

1. Go to your WordPress Dashboard.
2. Click on BricksFly.
3. Head to the Extension Tab.
4. Under Effects, toggle on Cursor Move Effects.

Step 1: Choose Your Target Element

Select the Element where you want to apply the cursor effect. In this example, Text is selected. However, you can choose any Element based on your design needs.

Go to Cursor Move Effect → Enable → Yes.

Once enabled, the Cursor Move Effect will be active for the selected element.

Step 2: Customize your Movement Area

Choose Default for an automatic motion effect or Custom to use your own class, then adjust Move X and Move Y to control how far the element moves with the mouse.

Movement Wrapper

Default:  Selecting the default option will apply a preset motion effect automatically.

Custom: If you select ‘Custom’, the default option will be ‘movement_area’. However, you can choose a different custom class if you prefer.

In this example, Default is selected, but you’re free to choose whatever works best for you.

Move X

In the Move X settings, you can control how far the element moves left and right (horizontally) in response to mouse movement.

In this example, the X value is set to 80. You can adjust this value based on your preference.

Move Y

In the Move Y settings, you control how far the element moves up and down (vertically) in response to mouse movement.

In this example, the Y value is set to 90, but you can choose any value based on your preference.

Duration

It controls how long the Element takes to stop moving after the mouse stops. In this example, the duration value is set to 0.05

Step 3: Configure Custom Movement and Styling

Control how your animation moves and looks by setting the duration and adding custom CSS to match your design style.

Note: Custom field includes a prebuilt default value, so you do not need to add anything manually. However, you can modify the custom value based on your preference.

Custom Area

Controls where the cursor move effect will be applied. Select Default for the automatic movement area, or use Custom to target a specific area with your own class.

Move X

Controls the horizontal movement of the selected element. A higher value creates more movement from left to right. By default, the Move X value is set to 70.

Move Y

Controls the vertical movement of the selected element. A higher value creates more movement from top to bottom. By default, the Move Y value is set to 70.

Duration

Controls how long the element takes to finish moving after the mouse stops. By default, the duration value is set to 0.5.

Customs

Custom settings let you add CSS properties that apply to the mouse move animation. Enter property-value pairs separated by semicolons, like property: value;  property2: value2

Final Result Of Custom Move Effect (Default)