V4 Extentions Mouse-Move-Effect Estimated reading: 4 minutes 2 views Make an element drift when visitors move their mouse. The element moves the opposite way of the mouse, with a soft and smooth feel. Great for hero images, cards and floating shapes. No code needed. WORKS ON Any V4 element EFFECT Moves with the mouse PLAN Pro BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free ANIMATION ADDONS Pro Tip: Install and activate both Animation Addons plugins before you start. STEP 1 Enable the Extension Turn on the extension from your dashboard. You only need to do this once. From your WordPress Dashboard, go to Animation Addon > Extensions. Open the Elementor V4 (Atomic) tab. Under Interaction Extensions, turn on Mouse Move Effect. Click Save Settings. Mouse Move Effect Extension 1 (click to zoom) STEP 2 Add the Effect Now add the effect to any element in the Elementor editor. Open your page with the Elementor Editor. Select any V4 element, for example an Image or a Div Block. In the General tab, open the Mouse Move Effect section. Turn on Enable. Mouse Move Effect Extension 2 (click to zoom) That is all. Save your page, then move the mouse over the element. It will move the opposite way. RESULT Final Result Mouse Move Effect Extension 3 Note: In this example, Movement Wrapper is set to Custom Area, so the card reacts to the mouse anywhere on the page. With the default setting, the card reacts when the mouse is over the card itself. SETTINGS Settings Turn on Enable and these settings appear. Mouse Move Effect Extension 4 (click to zoom) Enable Default: OffTurn the effect on or off for this element. You can set it per screen size. Movement Wrapper Default: DefaultChoose where the mouse must be for the effect to work. Default uses the element itself. Custom Area uses a bigger area that you choose, so the element reacts when the mouse is anywhere inside that area. Move X Default: 100How far the element can move left and right, in pixels. The element moves up to half of this number each way. Move Y Default: 100How far the element can move up and down, in pixels. The element moves up to half of this number each way. Duration Default: 1How soft the movement feels. A bigger number makes the element follow the mouse more slowly and smoothly. A smaller number makes it quicker. Custom Area Shows when Movement Wrapper is Custom Area. Type the CSS class or ID of the area, like .my-area or #hero. Mouse Move Effect Extension 5 (click to zoom) Tip: Give your area a CSS class first, then type that class here. The effect looks for the area around your element first, then anywhere on the page. Custom Properties Change more than the position. Click Add Property, pick a property like Scale or Opacity, and type a value. The value is reached while the mouse moves over the area. It goes back to normal when the mouse leaves. Note: Use numbers only. For example, 1.2 for Scale or 0.5 for Opacity. A value with letters will not work. Enable on Editor Default: OffTurn this on to see the effect inside the Elementor editor. PER DEVICE Different Settings Per Screen Size The settings can change per screen size. Use the Desktop, Tablet and Mobile buttons at the top of the editor. Use a bigger Move X and Move Y on desktop. Turn Enable off on tablet and mobile, where there is no mouse. TRY THIS Quick Recipe Not sure where to start? Use this for a gentle floating feel. MOVEMENT WRAPPER Default MOVE X 60 MOVE Y 40 DURATION 1.5 NEED HELP? Troubleshooting I do not see the Mouse Move Effect section Check that the extension is on. Go to Animation Addon > Extensions > Elementor V4 (Atomic) and turn on Mouse Move Effect. Then reload the editor. The element does not move on my live page Make sure Enable is on, the page is saved, and Animation Addons Pro is active. With the Default wrapper, the mouse must be over the element itself. With Custom Area, the mouse must be inside that area, and the class or ID you typed must match a real element. Clear your site cache if you use a cache plugin. My Custom Property does nothing Type a number as the value, like 1.2. Values with letters, like 20px, will not work. You Did It Your element now moves with the mouse. If you face any problem, please contact our support team. We are happy to help.
