How to Use Text Animation in BricksFly

Text alone can’t always grab attention, but with animation, it can. Whether you want a smooth entrance, a bold move, or a subtle scale effect, the Text Animation feature in BricksFly helps you make your content more dynamic and eye-catching.

It’s perfect for creating rhythm, drawing attention, or adding a creative touch to any headline or block of text—all without writing a single line of code.  

Requirement 

Make sure you have installed:

• Bricks Theme 
• BricksFly Pro

Activate Text Animation In BricksFly

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

Step 1: Go to any page and Open Edit with Elementor 

Then, in the editor panel, select the specific element you want to apply the text animation to. Once you’ve selected the element, click on ‘Text Animation’.

Animation

In the Animation settings, you’ll see a variety of effect options, including 

• None, 
• Character, 
• Word, 
• Text Move, 
• Text Reveal, 
• Text Scale,
• Text Invert, 
• and 3D Spin.  

Simply choose the effect that best suits your design needs.

In this example, the ‘Character’ effect is chosen. 

Note: The settings configuration for “Character” and “Word” are the same, but we will see different animation results in the final output. You can choose either one based on your preference. 

Character 

Trigger: It controls when the text animation starts. Available options include:

• On Scroll: The animation starts when the element enters the viewport while scrolling. 
• On Page Load: The animation starts automatically as soon as the page loads. 
• Play with Scroll: The animation progress is directly linked to the user’s scroll movement. 
• On Hover: The animation starts when the user hovers over the element. 
• On Click: The animation starts when the user clicks the element.

In this example, “On Scroll” is selected.

Text Wrapper: Controls how the text is grouped for animation. You can use predefined wrappers or a custom wrapper to animate characters separately. 

Delay: It controls how long to wait before animation starts. In this example, it is set to 0.15 seconds, but you can adjust it as needed. 

Duration: It controls how long the animation takes to complete. In this example, it is set to 3 seconds, but you can adjust it as needed. 

Stagger: Stagger adds a delay between each animation. In this example, it is set to 0.02 seconds, creating a smooth wave-like effect. You can adjust the value as needed.

Transform-X: Transform-X moves the text horizontally. In this example, the value is set to 20, so the text starts 20px to the right before returning to its original position. You can adjust it as needed.

Transform- Y: Transform-Y moves the text vertically. In this example, the value is set to 50, so the text starts 50px lower before returning to its original position. You can adjust it as needed. 

Enable On Editor: It lets you preview the animation inside the editor. If disabled, the animation will still work on the live site. 

Final Output of Character

However, if you select the ‘Word’ effect, the output will appear as shown below.

Step 2:  Customize Text Move Motion 

Activate your text animation and adjust timing, rotation, and movement for smooth, dynamic effects. Use scroll triggers and device breakpoints to ensure your animation looks great everywhere.

Text Move

Trigger: Controls when the text move animation starts. In this example, the animation starts on page load. You can choose any option you prefer. 

Text Wrapper: Controls how the text is divided for animation. You can use default wrappers or a custom wrapper to animate individual characters separately. The default option is selected here.

Delay: In this example, the delay is set to 0.4s. You can adjust it as needed. 

Duration: The duration is set to 2 seconds here. You can adjust it as needed. 

Stagger: Adds a small delay between each text element’s animation, creating a sequential motion effect. Here, the value is set to 0.02s. 

Rotation Direction:  Rotation Direction lets you rotate the text on the X or Y axis during the animation. X rotates the text forward or backward, while Y rotates it left or right like a door. In this example, X is selected.

Rotation Value: It controls how much the text rotates during the animation. In this example, the rotation value is set to -90, so the text rotates backward 90 degrees along the selected X-axis. 

Transform Origin: Transform Origin sets the starting point of the animation. In this example, “Top Center -50” is selected, so the animation starts 50px above the top center. 

To create different animation effects, you can also use the following values: 

• Top Center -50: 50px above the top center
• Bottom Right 20: 20px below the bottom right
• Center Left 30: 30px right of the center left
• Center Center 0: Exact center (default)
• 50% 50%: Center position
• 0% 0%: Top-left corner
• 100% 100%: Bottom-right corner

Enable On Editor: Set this option to “Yes” to preview the animation output. 

Final Output of Text Move 

Step 3:  Set Text Reveal Timing & Triggers

Adjust the animation’s timing and triggers to control when your text appears and how smoothly it moves. 

You can also set it to activate on scroll and fine-tune its behavior across devices for a seamless experience.

Text Reveal 

Trigger: Controls when the text reveal animation starts. In this example, “On Scroll” is selected. You can choose either option based on your design needs. 

Text Wrapper: Controls how text is wrapped before animation. Use default or custom wrappers to animate characters separately. In this example, the default option is selected, but you can choose any option you prefer. 

Delay: Sets how long to wait before the animation starts. In this example, it’s set to 0.05s, so the animation waits 0.05 seconds before playing. 

Duration: Controls how long the animation takes to finish. In this example, it’s set to 2s, so the animation runs for 2 seconds. You can adjust this value based on your preference.    

Stagger: Adds a small delay between each text animation. For example, 0.02s creates a fast wave-like effect. 

Enable  On Editor: It follows the same process as you enabled the option for the previous one.  

Final Output of Text Reveal

Step 4: Text Scale Control

The Text Scale animation lets you change how big or small the text gets, when the animation starts, and how it moves. You can set the delay, duration, stagger, easing, and scroll options to make the animation look good on any device.

Text Scale

Trigger: Controls when the text animation starts. In this example, “On Scroll” is selected, but you can choose any option you prefer. 

Text Wrapper: Sets how text is split for animation effects. You can use default or custom wrappers to animate each character individually. 

Delay: Here, the delay is set to 0.5s, but you can adjust it according to your choice. 

Duration: Controls how long the animation takes to finish. In this example, it’s set to 2 seconds, so the animation runs for 2 seconds. 

Stagger: Adds a small delay between each animated text part. In this example, it’s set to 0.02s, so the letters animate one after another instead of all at once.

Ease: Controls the animation speed style, such as smooth or fast.

Scale: Sets the starting or ending zoom size of the text. Here, the value is set to 1.5, but you can adjust it as needed. 

Text Break By: Chooses how the text is split for animation.

• Lines: Animates each line one by one.
• Words: Animates each word one at a time.
• Chars: Animates each letter one after another.

Here, “Lines” is chosen, though you can use any option you prefer.

Enable On Editor: This setting follows the same process.

Final Output of Text Scale 

Step 5: Configure 3D Spin & Text Invert

Transform ordinary text into eye-catching motion with powerful settings like Play Animation, Scroll Effects, and Breakpoints. 

From smooth delays to scroll-triggered movement, every detail is yours to customize. Create dynamic, responsive animations that feel as polished as they look.

3D Spin

Trigger: Selects when the 3D spin animation starts. In this example, “On Scroll” is selected, but you can choose any option you prefer.

Text Wrapper: Controls how text is separated before animation. Default and custom wrappers can be used for character-based effects. 

Delay: Delay controls how long the animation waits before starting. In this example, it’s set to 0.5s, so each text part appears one after another. You can adjust the value as needed.

Spin Text Color: Spin Text Color lets you choose colors like Primary, Secondary, Text, and Accent. In this example, the default color is used, but you can choose any color you prefer.

Start: Start setting controls where the animation begins. In this example, it’s set to “Top 50%,” so the text starts halfway down the container. You can adjust the value as needed.

End:  End setting controls where the animation finishes. In this example, it’s set to “Bottom 30%,” so the animation ends slightly above the bottom of the container. You can adjust the value as needed. 

Spin Scrub: It connects the animation progress with the scroll movement. If scrub is enabled, the animation moves forward or backward based on the user’s scroll position. However, in this example, Spin Scrub is disabled.

toggleAction: Controls how the animation behaves during scroll. 

You can also use the following values to create different animation effects:

• play none none reverse
• play reverse play reverse
• restart none none none
• play reset play reset

In this example, play none none reverse is selected, but you can choose any combination based on your preferred animation behavior.

Enabling On Editor: Shows the animation inside the Elementor editor preview.

Final Output of 3D Spin   

Text Invert 

Note: Default presets are already provided, but you can still adjust the values based on your preference. 

Start: Sets when the invert animation begins during scrolling. In this example, “Top 85%” is selected, but you can change it as needed. 

End: Sets where the invert animation finishes during scrolling. In this example, “Bottom Center” is selected, but you can choose any value based on your design needs.

Enable On Editor: This setting is configured the same way. 

Final Output of Text Invert