NewThe Supreme Bundle: every Divi Supreme plugin, 31% less than buying separately.See what’s inside →

Divi 5 Ready

Sign in

Get Supreme Bundle
Previous: Menu Module

Module 44 of 71

Next: Page Tour Module
On Scroll Header Animation module

Divi On Scroll Header Animation that moves with the scroll.

Headings that assemble letter by letter or word by word as visitors scroll. Scroll back and they come apart again.

Get Divi Supreme ProOpen the playground
Scroll ↓

Scroll to build

Scroll to build

Scroll to build

Scroll to build

Scroll to build

What is the Divi On Scroll Header Animation module?

On Scroll Header Animation is a Divi 5 module in Divi Supreme Pro that ties a heading’s animation to the scroll position. As the heading moves up the screen, its letters or words twist, flip, slide or sharpen into place. Scroll back and the animation plays in reverse.

Choose from 22 effects, from Twist Reveal and Split Merge to Random Blur Reveal and Word by Word Curve Reveal, and set the point in the viewport where the animation starts. Style the text with Divi fonts.

scroll effects

split modes

viewport start range

custom code

Start from a On Scroll Header Animation recipe.

The recipes and the playground run on the front end. Use Preview, or open the page, to try them.

Scroll inside the box.

Try every On Scroll Header Animation setting.

The recipes and the playground run on the front end. Use Preview, or open the page, to try them.

Everything On Scroll Header Animation can do.

Scroll-scrubbed

The animation follows the scroll forward and backward, not a one-time play.

22 effects

Twist, stretch, split, cross-in, flip, shuffle, blur, rush, wave, elastic and more.

Letters or words

Character effects for punch, word effects for readable long titles.

Viewport start

Choose where on the screen the animation begins, from 5% to 100%.

Real heading

The text stays a real heading for search engines and screen readers.

Reduced motion

Visitors who prefer less motion see the heading still and complete.

On Scroll Header Animation documentation

Setup for Divi 5: text, effect and viewport start point.

Read the guide

Need help? Contact support

Questions about On Scroll Header Animation.

How is this different from a normal entrance animation?

A normal animation plays once. This one is tied to scrolling: the heading assembles as it moves up the screen and comes apart again if you scroll back.

How many effects are there?

Twenty-two, including Twist Reveal, Split Merge, Letter Cross-In, Random Blur Reveal, Slide Rush, Elastic Reveal, Character Wave and four word-by-word effects.

What does Animation start do?

It sets how far down the screen the heading must reach before the animation begins. 100% starts as soon as it enters from the bottom.

Do word effects work for long headings?

Yes. Word by Word effects move whole words, which keeps longer titles readable while they animate.

Is the text still readable by Google?

Yes. The letters are split visually, but the heading stays real text with an accessible label.

What about reduced motion?

Visitors who ask their system for less motion see the heading complete, without the scroll effect.

Does it work with Divi 5 and WPML?

Yes. It is a native Divi 5 module, the text supports dynamic content, and it can be translated with WPML.

Next module, A to Z

Page Tour Module

Related modules

Block Reveal Text Module

A colour block wipes headings into view.

Shuffle Letters Module

Scramble text into place.

Text Notation Module

Underline and circle words on scroll.

4.9 out of 5

Rated 4.9 by Divi designers on Trustpilot. Running on 350,000+ sites.

Read reviews →

Let the scroll tell the story.

On Scroll Header Animation comes with 70+ Divi 5 modules and 16 extensions in Divi Supreme Pro.

Get Divi Supreme ProSee all modules
Divi Supreme