Premium element

Animated text

Reveal Text v1

Text Reveal v1 is a scrolling animation effect that gradually reveals text word by word as the user scrolls. It can also highlight specific words with different colors and sizes, creating a dynamic and engaging reading experience.

Preview

Quick Setup

data-revealv1-section=true

Required

Activates the Text Reveal v1 effect on the specified section. Adding this attribute enables the functionality.

data-revealv1-container=true

Required

Specifies the container that holds the text to be revealed. This container should be within the section tagged with data-revealv1-section.

data-revealv1-text=true

Required

The text element where the reveal animation occurs. It should contain the text content you want to animate.

Available Presets

Sets the color used for highlighted words.

data-highlight-color-preset="preset-name"

Optional

pastelBlue

pastelPink

pastelLime

pastelOrange

pastelPurple

pastelYellow

pastelGreen

pastelMagenta

pastelTeal

pastelTangerine

Advanced configuration

data-reveal-speed

Optional

Controls the speed of the text reveal animation. It affects how quickly words appear as the user scrolls.

Default: 1.5

data-highlight-words

Optional

A comma-separated list of words to highlight during the animation. These words will change color and size as they are revealed.

data-highlight-size

Optional

Defines the font size for highlighted words when they are revealed.

Default: 1.5em

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