General Extensions Tilt Effect Extensions Estimated reading: 3 minutes 160 views Looking to make your website more engaging? The Tilt Effect adds a smooth 3D motion that responds as visitors move their mouse over an element. It’s a simple way to bring your design to life with a sense of depth and movement. This guide will show you how to turn it on and fine-tune the settings to get the exact look you want. 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 Tilt Effect Go to your WordPress Dashboard. Click on Animation Addons. Head to the Extension tab. Click on General extensions and toggle on Tilt Effect. Max Tilt MaxTilt setting controls how much the element tilts when you move your mouse over it. For example, I set it to 20, but you can choose any value based on your preference. The higher the value, the more noticeable and dramatic the tilt effect will be. As a result, when you move your mouse across the element, it will rotate or “lean” in 3D space. Perspective Perspective settings control the depth of 3D effects. A lower value, like 200 to 500, makes the element tilt more dramatically, giving it a bold, popping-out look. A higher value, like 1000 to 2000, still allows the element to rotate, but it appears farther away, so the depth effect is more subtle. For example, I set the value to 800, but you can choose any value based on your preference. Scale Scale setting controls how much the element zooms in or enlarges during the tilt animation. You can choose any value that fits your design. However, using a slight scale increase, such as 1.05 or 1.1, can enhance the 3D tilt effect, making the element feel more dynamic and giving it a pop-out look when hovered. For example, I set the value to 1, but you can choose any value based on your preference. Speed Speed setting in the Tilt effect controls how quickly the element returns to its original, flat position after the mouse moves away. It’s measured in milliseconds. For example, if you set the speed to 300, the element will smoothly reset its position in 300 milliseconds (or 0.3 seconds). A lower speed value results in a quicker, snappier return, while a higher value makes the movement slower and more relaxed. For instance, a speed of 3000 makes the reset very slow, taking 3 seconds to return. This setting helps you control how smooth or fast the animation feels when the user stops hovering over the element. For example, I set the value to 3000, but you can choose any value based on your preference. Final Result You Did It Nice work! You’ve added a 3D Tilt Effect to your element, and now it reacts smoothly when someone moves their mouse over it. By tweaking options like Max Tilt, Perspective, Scale, and Speed, you’ve shaped the effect to match your design, whether you went with something subtle or more eye-catching. This little detail brings extra depth and movement to your layout. With just a few adjustments, you’ve made your site feel more lively and visually interesting. If you have any questions or need a hand, feel free to reach out to our support team—we’re always here to help.
