GSAP Extensions Cursor Move Effect Estimated reading: 4 minutes 34 views Give your website a playful touch with the Cursor Move Effect! When visitors move their mouse, your elements will gently shift in response, making the experience more interactive and fun. Just enable it and set your favorite moves. Overall, this effect gives you control over how elements move and react, letting you customize the movement area, speed, and style to fit your design. Requirement Elementor (Page Builder) Animations Addons for Elementor (Our Plugin) Tip: Make sure Animation Addons is installed and activated on your WordPress site before you start. How To Activate Cursor Move Effect Go to your WordPress Dashboard. Click on Animation Addons. Head to the Extension Tab. Under Effects, toggle on Cursor Move Effects. Step 1: Choose Your Target Element & Enable the Wrapper Select the element you want to apply the cursor effect to, then click on the container to enable the wrapper. Next, click on ‘Cursor Move Effect’ and toggle the ‘Enable’ switch to ‘Yes’. The Cursor Move Effect is now enabled. You’ll find the option available in the page builder. Cursor Move Effect Enable & Enable On Editor You’ll see a setting called ‘Enable’. To see the animation while editing, make sure this is turned on. If you choose “Yes”, the animation will play in the editor, just like it does on the live site. If you leave it off, the element will stay still in the editor—but the animation will still work on your live page. In short, this setting lets you quickly check how your animation looks without leaving the editor. 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. Personally, I prefer the ‘Default’ option, 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. For example, I set the value to 100, but you can adjust it to any 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. For example, I set the value to 80, but you can choose any value based on your preference. Step 3: Control Duration and CSS Control how your animation moves and looks, by setting the duration and adding custom CSS to match your design style. Duration The Duration setting controls how long the element takes to finish moving after the mouse stops. For example, I set the duration to 0.7, but you can choose any value you prefer. 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; For example, I leave it as is, but you can set any custom values based on your preference. Final Result You Did It Congrats! You’ve successfully added a playful, interactive touch to your website with the Cursor Move Effect. Now your elements respond smoothly to mouse movement, making your site more engaging and fun. Feel free to tweak the settings anytime to get the perfect look and feel. Keep experimenting and watch your design come alive! In addition, if you have any questions or need a hand, feel free to reach out to our support team—we’re always here to help.
