How to Enhance Your Website with Mouse Track Motion Effects
Creating a dynamic and interactive experience on your website can captivate your visitors. With JupiterX, adding motion effects that respond to mouse movements is straightforward. Below, you'll find instructions on how to set up Mouse Track motion effects to make elements on your site move with the cursor.
Setting Up Mouse Track Motion Effects:
- Go to the Container, Section or Widget in Elementor where you want to add the effect.
- Click on the "Advanced" tab.
- Locate the "Motion Effects" option.
- Toggle the "Mouse Effects" option to ON. Click the pencil edit icon next to "Mouse Track" to configure the settings.
- Direction: Choose "Opposite" to have the element move in the opposite direction of the mouse movement, or "Direct" to move in the same direction as the mouse movement.
- Speed: Adjust the speed setting, with options ranging from 0 (no movement) to 10 (fastest movement).
- For "Apply Effects On," select when you want the mouse effects to be active—Desktop, Tablet, and/or Mobile devices.
- Choose "Effects Relative To" to define the motion effect's reference point— "Default," "Viewport," or "Entire Page."
Important Notes:
- Compatibility: Mouse Track effects may behave differently on various web browsers. For instance, Safari users might encounter issues where elements with motion effects disappear.
If you're experiencing issues on Safari, such as elements vanishing or seeing an error message regarding "maximum call stack size exceeded," it might be due to an old jQuery version used by WordPress.
- To remedy the problem:
- Consider removing entrance animations from widgets with motion effects.
- Remove mouse effects from areas that have both scrolling and mouse effects enabled.
- Design Tip: Use Mouse Track effects judiciously. While they can add a unique touch, overuse may be distracting for your visitors.
Seeing Your Effects in Action:
Once you've set up your Mouse Track motion effects, click "Update" to save your changes and preview your website. Move your mouse around the affected areas to see the elements respond. This interactive feature can provide a subtle yet engaging aspect to your web design, encouraging visitors to explore your content more thoroughly.
We hope you find this feature a fun and creative addition to your websites. Experiment with different settings to discover the best interaction for your users!