How to Use Advanced Animation in BricksFly

The Advanced Animation extension in BricksFly Pro helps you add smooth animation effects to Bricks elements. You can choose from Fade Animation, 3D Wave, or Custom animation and adjust the settings based on your design needs.

Requirement 

Make sure you have installed:

• Bricks Theme 
• BricksFly Pro

Activate Advanced Animation in BricksFly

1. Go to your WordPress Dashboard. 
2. Click on BricksFly. 
3. Head to the Extension tab. 
4. Under ScrollSmoother, toggle on Advanced Animation.

Step 1: Select an Element and Choose an Animation Type

Select the element where you want to apply the effect.

In this example, a text element is selected. You can also apply the effect to other elements, such as images, headings, buttons, icons, navigation menus, and more.

Next, open the Advanced Animation extension.

After opening Advanced Animation, you will find the following animation options:

• None
• Fade Animation
• 3D Wave
• Custom

Note: Use Custom to create and adjust a custom animation based on your design needs.

Step 2: Configure Fade Animation Settings

Method: It controls how the fade animation moves. Select From to fade the element into its original position. Select To to fade the element away from its original position. In this example, From is selected.

Trigger: Controls when the fade animation starts. For example, the animation can start on page load, on scroll, on hover, or based on another selected interaction. In this example, On Scroll is selected.

Wrapper: Controls how the selected content is wrapped before the animation is applied. You will find two options: Default and Custom Animation. In this example, the Default option is selected.

Delay: Controls how long the animation waits before starting. A higher delay value makes the animation start later.

Fade From: Controls the direction or starting point of the fade animation. The element can fade in from the top, bottom, left, right, or any selected direction. In this example, the Left option is chosen as the direction.

Duration: Controls the fade animation speed. A higher value makes it slower, while a lower value makes it faster. In this example, the duration is set to 1.5.

Ease: Controls the animation’s smoothness and speed style. It changes how the animation starts, moves, and ends. In this example, Power2.out is chosen.

Fade Offset: Controls the distance between the element’s starting and final positions during the fade animation. A higher offset value creates more movement. The default value is 50, but you can set any value as needed.

Enable on Editor: It helps you instantly preview your element’s animation directly in the editor.

Final Output of Fade Animation

Step 3: Customize the 3D Wave Effect

Note: All preset values are already set by default. However, you can adjust them based on your animation needs.

Method: Controls how the 3D Wave animation moves. Select From to animate the element into its original position, or To to move it away. In this example, From is selected.

Trigger: Controls when the 3D Wave animation starts. You can choose triggers such as On Scroll, On Page Load, Play with Scroll, On Hover, or On Click. In this example, On Scroll is selected.

Wrapper: Controls how the selected content is wrapped before the animation is applied. It includes two options: Default and Custom. In this example, Default is selected.

Delay: Controls how long the animation waits before starting. A higher delay value makes the animation start later. In this example, the delay value is set to 0.15.

Duration: Controls the 3D Wave animation speed. A higher value makes it slower, while a lower value makes it faster. In this example, the duration is set to 1.5

Ease: Controls the animation’s smoothness and movement style. It changes how the animation starts, moves, and ends. In this example, Power2.out is chosen.

Rotation Direction: Controls the direction of the 3D rotation. The element can rotate on the X axis or Y axis to create a 3D wave effect. In this example, the rotation direction is set to X.

Rotation Value: Controls the rotation amount of the element. A higher value creates a stronger 3D rotation effect. In this example, the rotation value is set to –80

Transform Origin: Controls the starting point of the 3D rotation. It changes where the element rotates from. In this example, the value is set to top center -50

Enable On Editor: Allows the 3D Wave animation preview directly inside the editor.

Final Output of 3D Wave Animation