Elementor Scroll Fade Text Plugin
$ 19.00
- One time payment
- Use on Unlimited Websites
- Priority Support
Elementor Scroll Fade Text adds a subtle, immersive scrolling effect to your Elementor headings and text widgets.
As visitors scroll down your page, each word gradually darkens — creating a natural “reading progress” effect that makes your content feel dynamic and alive.
Overview of the Elementor Scroll Fade Text Plugin
Elementor Scroll Fade Text gives you a modern scroll-based reading effect that feels like a reading companion. Unlike noisy animations or progress bars, this reading progress text effect subtly changes word color as the visitor scrolls — a progressive text fade that increases perceived readability and engagement.
Install and activate the plugin, then open any Heading or Text Editor widget in Elementor. Under the Style tab you’ll find the Scroll Fade Effect controls: toggle the effect on, pick your start color and end color, and adjust the fade sensitivity. The plugin uses scroll-driven text color change logic to map the visitor’s scroll position to per-word color transitions, producing a smooth word-by-word fade on scroll.
Because it’s optimized with IntersectionObserver and requestAnimationFrame, Elementor Scroll Fade Text only runs when the element is in view — keeping it a lightweight Elementor animation plugin suitable for high-performance sites. Whether you want a gentle reading-aware text animation for blog content, or a stronger progressive reading indicator for websites on your landing pages, this plugin is flexible and easy to style.
Key Features
- Easy toggle inside Elementor for Heading and Text Editor widgets.
- Per-word progressive fade: words darken one-by-one as the reader scrolls.
- Custom color pickers: set start (light) and end (dark) colors.
- Fade Sensitivity slider**: control how quickly the fade progresses while scrolling.
- Performance-minded: uses IntersectionObserver + rAF and only initializes when visible.
- Preserves inline HTML (bold, links) — works with existing formatting.
- Lightweight JavaScript; minimal impact on page load and rendering.
- Works with multi-line headings and paragraphs — graceful fading across lines.
- Accessibility-aware: color changes are subtle and customizable to maintain contrast.
- Developer-friendly: clear class names and data-attributes for custom styling or JS hooks.
Use Cases — Who Is This For
- Bloggers & journalists who want to subtly guide reading flow and improve dwell time.
- Storytellers & long-form writers who want a visual reading cue without heavy UI.
- UX designers & content strategists aiming to increase engagement with minimal animation.
- Marketing sites & landing pages that want a polished, attention-guiding typographic touch.
- Educators & e-learning platforms providing reading progress hints for learners.
- Agency developers building client sites with a modern reading experience.
- Accessibility-conscious teams who need customizable color transitions to meet contrast needs.
Frequently Asked Questions
With the Elementor Scroll Fade Text plugin you can enable scroll-fade on a Heading or Text Editor widget. In the Style tab enable “Scroll Fade Effect”, set your start and end colours, and the plugin handles per-word fading as users scroll.
The Elementor Scroll Fade Text plugin supports both Heading and Text Editor widgets. You’ll find the controls in the widget’s Style → Scroll Fade Effect section.
Yes — the Fade Sensitivity slider allows you to increase or decrease the scroll distance required for the fade to complete: lower values = slower fade, higher values = faster progression.
No — this plugin is built for performance. It uses browser APIs (IntersectionObserver, requestAnimationFrame) to animate only when the text is in view. This keeps it lightweight compared to heavy scroll-animation libraries
