{"id":505,"date":"2026-07-28T10:00:28","date_gmt":"2026-07-28T10:00:28","guid":{"rendered":"https:\/\/bricksfly.com\/blog\/?p=505"},"modified":"2026-07-28T10:00:29","modified_gmt":"2026-07-28T10:00:29","slug":"bricks-text-animation","status":"publish","type":"post","link":"https:\/\/bricksfly.com\/blog\/bricks-text-animation\/","title":{"rendered":"How to Add Text Animation in Bricks Builder"},"content":{"rendered":"\n

Text alone doesn’t always hold attention, but Bricks text animation can change that. A heading that reveals character by character, a subheading that scales into view, or a block of text that inverts on scroll turns static content into something dynamic<\/strong><\/a> and eye-catching.<\/p>\n\n\n\n

The reason it used to be hard is that text animation relies on GSAP<\/strong><\/a> and JavaScript. Effects like staggered character reveals and scroll-triggered inversions traditionally required custom scripting. With a no-code tool, the same effects become a matter of choosing an animation type and adjusting a few visual settings.<\/p>\n\n\n\n

This guide walks through how to add text animation in Bricks Builder<\/strong><\/a> using BricksFly, from activating the feature to configuring each effect. You’ll learn the available animation types (character, word, reveal, scale, invert, and more), how the trigger and timing settings work, and how to apply them to any heading or text element.<\/p>\n\n\n\n

\n
\n

\n Quick Answer\n <\/p>\n\n

\n \nTo add text animation in Bricks Builder, activate the Text Animation extension in BricksFly (Dashboard, BricksFly, Extensions), then edit a page in Bricks, select a heading or text element, and open Text Animation. Choose an animation type such as Character, Word, Text Reveal, or Text Scale, set the trigger and timing, and the text animates without any code.\n\n <\/p>\n <\/div>\n<\/section>\n\n\n\n

What Is Text Animation in Bricks?<\/strong><\/h2>\n\n\n\n

T<\/strong><\/a>ext animation in Bricks<\/a> <\/strong>means applying motion to a heading or text element, animating the words or characters as they appear, move, or respond to scroll. Instead of text simply loading in place, each character, word, or line animates according to the effect you choose, creating rhythm and drawing attention to your most important content.<\/p>\n\n\n\n

The effects are powered by GSAP, the animation engine behind most premium web motion. Text animation typically splits a heading into smaller pieces (characters or words) and animates each one, often with a small delay between them (called a stagger) that creates a flowing, wave-like reveal. Scroll-based text effects tie the animation to the user’s scroll position.<\/p>\n\n\n\n

In BricksFly<\/strong><\/a> specifically, Text Animation is one of the GSAP extensions. Rather than writing GSAP code, you enable the extension, select your text element, and configure the effect through visual controls, choosing the animation type<\/strong><\/a>, when it triggers, and how it’s timed. The tool generates the animation for you.<\/p>\n\n\n\n

Before You Start: Requirements and Activation<\/strong><\/h2>\n\n\n\n

Text Animation is a Pro extension in BricksFly, so a quick setup comes first.<\/p>\n\n\n\n

Requirements<\/strong><\/h3>\n\n\n\n

Make sure you have installed:<\/p>\n\n\n\n