CYBERWEEK Last dayCode: CYBER35

Reveal text v2

PREVIEW

What is it?

Reveal text v2 gradually changes the color of individual words within a text element as the user scrolls through a section. The effect is designed to provide a dynamic text reveal experience, where each word transitions from an initial color to a target color.

How to set it up?

Configure the following attributes in the Bricks Builder:

'data-reveal-v2-section'. Activates the Scroll Reveal Text v2 on the specified container section. Adding this attribute enables the functionality.

'data-reveal-v2-text-container'. Specifies the container element where the text will be revealed. The container should be a child of the section.

'data-reveal-v2-text'. The text element containing the words to be revealed. The content of this element will be split into individual words for the reveal animation.

'data-reveal-v2-speed' (Optional). Sets the speed of the reveal animation. This value controls how quickly the words transition based on scroll progress. The default value is 1.5. Higher values make the text reveal faster.

  • Example values:
    • "1.0" (slower reveal)
    • "2.0" (faster reveal)

'data-initial-color-preset' (Optional). Defines the starting color for the words before the scroll reveal begins. Presets available include:

  • gray (default)

  • lightgray

  • darkgray

  • silver

  • darkslategray

  • dimgray

  • slategray

  • navy

  • olive

  • maroon

  • teal

  • purple

We're here to help

Choose how you'd like to connect with our support team

Contact Support

Get help from our team of experts

Response within 24 hours