GSAP Extensions How to Use Cursor Move Effect in Bricks Builder Using BricksFly Estimated reading: 3 minutes 137 views 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 Go to your WordPress Dashboard. Click on BricksFly. Head to the Extension Tab. 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)
