How to Add Animated Heading in Bricks Builder Using BricksFly

Animated Heading Element allows you to add animated text effects to headings in Bricks Builder. You can choose from multiple animation styles, control when the animation starts, and adjust its duration and delay. This documentation explains how to activate the element, configure the heading content, and customize the animation settings.

Requirement 

Make sure you have installed:

• Bricks Theme 
• BricksFly Pro

Activate Animated Heading in BricksFly

1. Go to your WordPress Dashboard. 
2. Click on BricksFly. 
3. Head to the Elements tab. 
4. Under Animations, toggle on Animated Heading.

Step 1: Configure the Heading Content

Heading Text: Adds the text displayed as the animated heading. For this example, the heading is set to “What We Do Best.”

HTML Tag: Selects the HTML tag used for the heading, such as H1, H2, H3, or another available tag. Choose the tag based on your page heading structure.

Link: Adds a link to the animated heading. When visitors click the heading, they are directed to the specified page, section, or URL.

Text Align: Controls the horizontal alignment of the heading. Available options may include left, center, and right.

Step 2: Adjust the Heading Animation

Animation Type: Selects the animation effect applied to the heading text. Different animation types control how the text appears, moves, or reveals on the page. Available options include:

• Reveal: Gradually reveals the heading text with a smooth entrance animation.
• Scale: Animates the heading by changing its size, creating a zoom-in or zoom-out effect as the text appears.
• Slide: Makes the heading text slide into view from its starting position.
• Skew Reveal: Reveals the heading while applying a skewed movement, creating a tilted entrance effect before the text settles into its normal position.
• Glow Pulse: Adds a pulsing glow effect to the heading text, making the glow gradually increase and decrease.
• Typewriter: Displays the heading text progressively, creating an effect similar to text being typed on a keyboard.
• Mask Wipe: Reveals the heading through an animated mask that moves across the text, creating a smooth wiping effect.
• Water Wave: Applies a flowing, wave-like motion to the heading text to create a water-inspired animation effect.
• Background Clip Text: Displays a moving or styled background within the shape of the heading text, making the background visible only inside the letters.
• Character Animation: Animates the individual characters of the heading separately, creating a more detailed and dynamic text animation.

For this example, Character Animation is selected, but you can choose any animation type based on your preference.

Trigger: Determines when the heading animation starts, such as when the page loads or when the heading enters the viewport. Available trigger options include On Scroll, On Page Load, Play with Scroll, Hover, and Click. In this example, On Scroll is selected.

Duration: Controls how long the animation takes to complete. A lower value creates a faster animation, while a higher value creates a slower animation. For this example, the duration is set to 2, but you can choose any value based on your needs.

Delay: Sets the amount of time the animation waits before starting. Increasing the delay causes the heading animation to begin later. In this example, the Delay value is left blank.

Stagger: Controls the delay between the animation of each character or text part. A lower value makes them animate closer together, while a higher value creates more noticeable spacing between each animation. In this example, the value is set to 0.02s.

Final Result