How to Add 3D Tilt Mouse Effects in JupiterX

Elevate the interactivity on your website by implementing 3D tilt mouse effects to elements using JupiterX. This feature creates a dynamic experience that responds to the visitor's mouse movements. Here's how you can set up the 3D tilt effect:

Getting Started with 3D Tilt

Before you dive into the settings for 3D Tilt, ensure that you are editing your page with the Elementor Page Builder.

Step-by-Step Guide to Adding 3D Tilt

Select Your Element: To begin, click on the element you want to apply the 3D tilt effect to in the Elementor editor.

Access Motion Effects: Navigate to the 'Advanced' tab in the Elementor panel, and find the 'Motion Effects' section.

Enable Mouse Effects: Toggle the 'Mouse Effects' switch to ON.

Adjust 3D Tilt Settings:

  1. Click on the pencil edit icon next to '3D Tilt'.
  2. Here, you have a few options to configure:
    • Direction: This setting lets you choose how the tilt effect responds to mouse movement. You can select 'Opposite' for the element to tilt in the opposite direction of the mouse or 'Direct' to follow the same direction as the mouse.
    • Speed: Adjust the speed of the tilt effect on a scale from 0 to 10, where 0 is no tilt effect and 10 is the fastest tilt response.

Customize Device Responsiveness: Under 'Apply Effects On', you can choose whether the motion effects will be displayed on Desktop, Tablet, and/or Mobile.

Effects Context: Decide where the effect is relative to by choosing 'Default', 'Viewport', or 'Entire Page'.

Additional Tips

  • Remember that less is often more. Use the 3D tilt effect sparingly to highlight key interactive elements without overwhelming your visitors.
  • Always preview your changes on different devices to ensure a consistent and enjoyable experience.

Troubleshooting

  • Effect Not Visible? Check if the effect is enabled on the specific device types under ‘Apply Effects On’.
  • Effect Too Fast or Slow? Adjust the speed under the '3D Tilt' settings to find a balance that feels natural.

By following these steps, you can make your website come alive with engaging 3D tilt mouse effects that capture your visitors' attention. If you need further assistance, don’t hesitate to reach out to our support team.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.