Scrolling Text

Overview

The Text Scroll module animates text as the visitor scrolls down the page — each word, letter, or line fades, slides, scales, rotates, or transforms into view based on scroll position. It supports over 20 animation effects, fine-grained timing controls, and colour transitions, making it ideal for cinematic hero headlines, storytelling sections, or any place you want text to reveal itself dramatically as the user scrolls.

Content Settings

Text Content

Scroll Text  (Text Area)

Enter the text content that will animate on scroll.

• Default: Scroll down to see each word fade in beautifully

Animation Settings

Effect  (Dropdown)

Choose the animation effect applied to the text as it scrolls into view.

• Available options: Fade, Blur, Color Fill, Slide Up, Slide Down, Slide Left, Slide Right, Scale, Rotate, Flip (3D X), Flip Y (3D), Wave, Typewriter, Glow, Depth (3D), Bounce In, Elastic, Gradient Sweep, Skew, Spiral, Zoom Blur, Split, Fade + Blur, Slide Up + Scale
• Default: Fade

Split Type  (Dropdown)

How to split the text for animation — animate each word, letter, or line individually.

• Available options: Word, Letter, Line
• Default: Word

Speed  (Dropdown)

Animation speed — controls how quickly the effect plays.

• Available options: Ultra Slow, Slow, Normal, Fast, Ultra Fast
• Default: Normal

Easing  (Dropdown)

Easing function for the animation — controls the acceleration curve.

• Available options: Linear, Ease In, Ease Out, Ease In Out, Ease In Cubic, Ease Out Cubic, Ease In Out Cubic, Ease In Quart, Ease Out Quart, Ease In Expo, Ease Out Expo, Ease In Out Expo, Bounce, Elastic, Elastic Out, Back In, Back Out, Back In Out
• Default: Ease Out

Direction  (Dropdown)

Animation direction — controls the order in which text elements animate.

• Available options: Normal, Reverse, Alternate, Center Out, Edges In, Random
• Default: Normal

Scroll Trigger

Scroll Start (%)  (Slider)

Viewport percentage where the animation starts. 100 means the animation begins when the module enters the bottom of the screen; 0 means the top.

• Range: 0 to 100 (in %)
• Default: 100

Scroll End (%)  (Slider)

Viewport percentage where the animation ends — how far into the viewport the module must scroll before the animation completes.

• Range: 0 to 100 (in %)
• Default: 20

Stagger (ms)  (Slider)

Delay between each element's animation in milliseconds. A higher value creates a more pronounced cascade effect between words, letters, or lines.

• Range: 0 to 500 ms
• Default: 0

Duration Multiplier  (Slider)

Multiply the animation duration. 1 is normal speed; 2 makes each element's animation twice as long.

• Range: 0.1 to 3
• Default: 1

Link

Standard Divi link options — add a URL to make the module clickable.

Background

Standard Divi background options including solid color, gradient, image, and video backgrounds. The default background is a dark navy (#1a1a2e).

Design Settings

Text

Standard Divi font options for the scroll text — control font family, size, weight, style, color, line height, and letter spacing. Default size is 3rem with font weight 600 and white (#ffffff) color.

Effect Colors

Start Color  (Color Picker)

Starting color for colour-based effects such as Color Fill, Gradient Sweep, and Glow. This is the colour text begins at before it animates to the End Color.

• Default: #999999

End Color  (Color Picker)

Ending color for colour-based effects — the final colour text reaches after it has fully animated in.

• Default: #ffffff

Ghost Text Color

Ghost Text Color  (Color Picker)

Color of inactive text before it animates in on scroll. If left empty, the module uses reduced opacity to show inactive text. Setting a colour here gives you explicit control over the 'not yet visible' state.

• Default: Empty (uses opacity)

Effect Settings

Blur Amount (px)  (Slider)

Amount of blur applied during blur-based effects.

• Range: 0 to 30 px
• Default: 10 px

Slide Distance (px)  (Slider)

Distance elements travel during slide animations (Slide Up, Slide Down, etc.).

• Range: 0 to 200 px
• Default: 50 px

Scale Start  (Slider)

Starting scale value for scale effects. 0.5 means elements begin at half their normal size and grow to full size as they animate in.

• Range: 0 to 2
• Default: 0.5

Rotate Angle (deg)  (Slider)

Rotation angle for rotate effects — how many degrees each element is rotated at the start before animating to 0°.

• Range: 0 to 360 degrees
• Default: 180 degrees

Perspective (px)  (Slider)

3D perspective depth for flip and depth effects. A lower value creates a more dramatic 3D effect.

• Range: 100 to 2000 px
• Default: 1000 px

Transform Origin  (Dropdown)

Origin point for transformation effects — the anchor point around which rotate, scale, and flip effects are applied.

• Available options: Center Center, Top Left, Top Center, Top Right, Center Left, Center Right, Bottom Left, Bottom Center, Bottom Right
• Default: Center Center

Built-in Style Options

Standard Divi design options are available: Sizing (width and height), Spacing (margin and padding), Border (style, radius, color), Box Shadow, Filters (opacity, blur, etc.), Transform (rotate, scale, translate), and Animation (entrance effects).

Advanced Settings

• CSS ID & Classes — Add a custom CSS ID or classes to the module for targeted styling.
• Custom CSS — Write custom CSS targeting the scroll container, scroll text, and individual text spans.
• Visibility — Show or hide this module on desktop, tablet, or phone.
• Scroll Effects — Add parallax or scroll-triggered animation effects.
• Position — Control the module's positioning (relative, absolute, fixed).
• Transition — Customize hover transition duration and style.
• Conditions — Set conditions for when this module should display.

Tips & Best Practices

• Set a dark background on the module and use white as the End Color for a classic cinematic text reveal effect — the default settings are already configured this way.
• Use the Stagger setting (e.g., 50–100ms) with Word split type to create a flowing cascade effect where each word rolls in one after the other.
• The Scroll Start and Scroll End percentages control the scroll range over which the animation plays. A wider range (e.g., 100% start, 0% end) makes the animation play across the full scroll distance, while a narrower range creates a quicker, snappier reveal.