V4 Extentions Tilt Estimated reading: 4 minutes 5 views Make a card, image or box lean toward the mouse in 3D. Add a soft glare for a premium feel. No code needed. WORKS ON Any V4 element TRIGGER Mouse hover PLAN Pro BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free ANIMATION ADDONS PRO Active license Tip: Install and activate both Animation Addons plugins before you start. The tilt only plays on the live page when Pro is active. 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, then click Interaction. Under Interaction Extensions, turn on Tilt. Click Save Settings. Tilt Extension (click to zoom) STEP 2 Turn On Tilt Pick the element you want to tilt, then turn Tilt on. Open your page with the Elementor Editor. Select an element, for example a Div Block that holds a card. In the General tab, open the Tilt section. Turn on Enable Tilt. Click Update to save your page. Tilt section (click to zoom) The Content tab after you turn on Enable Tilt (click to zoom) Tip: Tilt works best on a whole card, so put your image and text inside a Div Block and tilt the Div Block. SETTINGS Content Tab Enable Tilt Default: OffTurns Tilt on for this element. You can set it for each device. Max Tilt Default: 15The biggest angle, in degrees. A bigger number leans the element more. Speed Default: 300How fast the element follows the mouse, in milliseconds. A bigger number feels softer and slower. Scale Default: 1How big the element gets while you hover. 1 keeps the size. 1.1 grows it by 10%. Perspective Default: 1000How deep the 3D looks. A smaller number gives a stronger 3D look. Enable in Editor Default: OffLets the tilt work inside the Elementor editor too, so you can test while you build. Style Tab Enable Glare Default: OffAdds a soft white shine that moves with the mouse. Max Glare Default: 0.5How strong the shine is. 0 is invisible and 1 is the strongest. Shown after you turn on Enable Glare. The Style tab (click to zoom) Advanced Tab Reset Default: OnWhen the mouse leaves, the element returns to flat. Turn it off to keep the last angle. Transition Default: OnSmooth movement. Turn it off for a quick, instant response. Gyroscope Default: OnOn a phone or tablet with motion sensors, the element leans when you tilt the device. The Advanced tab (click to zoom) RESULT Final Result Four cards with different settings. In each GIF the mouse moves over the corners of the card, then leaves. Default Only Enable Tilt is on. Default tilt. The card leans toward the mouse and flattens when the mouse leaves Strong tilt Max Tilt is 35 and Scale is 1.1. Strong tilt. A bigger angle, and the card grows a little With glare Enable Glare is on and Max Glare is 0.6. A soft shine follows the mouse No reset Reset is off. The card keeps its last angle when the mouse leaves GOOD TO KNOW How It Works Mouse position The element leans toward the spot where the mouse is. The mouse at the center keeps it flat. Per device All settings can be different on desktop, tablet and mobile. Live page The tilt runs on the live page. Turn on Enable in Editor to test inside the editor. Only loads when used Pages with no tilt element do not load any extra script. HELP Troubleshooting I do not see the Tilt section Check that the extension is on. Go to Animation Addon > Extensions > Elementor V4 (Atomic) > Interaction and turn on Tilt. Then reload the editor and select an element. Nothing happens when I hover Make sure Enable Tilt is on. Update the page and clear your cache. Test on the live page with a mouse. Pro must be active with a valid license. The tilt is too strong or too weak Change Max Tilt. Try 8 for a soft lean or 30 for a strong one. The element does not return to flat Turn on Reset in the Advanced tab. My phone tilts the element by itself This is the Gyroscope option. Turn it off in the Advanced tab if you do not want it. You Did It Your element now leans toward the mouse in 3D. If you face any problem, please contact our support team. We are happy to help.
