How to Use Tilt Effect in BricksFly

Tilt Effect in BricksFly lets you add an interactive 3D hover movement to any supported Element in Bricks Builder. It helps make images, buttons, text, and other Elements feel more dynamic as they respond to mouse movement.

Requirment

Make sure you have installed:

• Bricks Theme 
• BricksFly Pro

How To Activate Tilt Effect in BricksFly

1. Go to your WordPress Dashboard. 
2. Click on BricksFly.
3. Head to the Extension tab. 
4. Click on General extensions and toggle on Tilt Effect. 

After activating the Tilt Effect, return to the Bricks Builder Editor and select the Element where you want to apply the effect. This can be a button, image, text, or any other supported Element inside your layout.

Then, go to the Content tab on the left side of the screen, find the Tilt Effect, and enable it by selecting Yes. In this example, an Image Element is selected.

Note: Tilt Effect settings come with preset default values. You can use the default values or customize them based on your design needs. In this example, the default values are used.

Max Tilt

Max Tilt setting controls how much the Element tilts when the mouse moves over it. In this example, the value is set to 20, but you can adjust it based on your preference.

A higher value creates a stronger and more noticeable tilt effect. As a result, the Element will rotate or lean in 3D space when the mouse moves across it.

Perspective

Perspective setting controls the depth of the 3D effect. A lower value, such as 200 to 500, makes the Element tilt more dramatically and creates a stronger 3D look. A higher value, such as 1000 to 2000, makes the tilt effect appear smoother and more subtle.

In this example, the value is set to 1000, but you can adjust it 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.

Duration

Controls how long the tilt animation takes to complete. A lower value makes the movement faster, while a higher value makes the animation slower and smoother.

In this example, the duration value is set to 0.04

Final Result