Introduced from Uncode 2.9.2, the 'Scroll Reveal Text' effect, powered by GSAP, brings text to life by dynamically unveiling words and lines as users scroll through the page. This captivating animation enhances storytelling, creating an engaging and immersive experience. The effect colors individual words or lines sequentially, allowing you to highlight key messages or guide the reader's attention in a visually compelling way. Perfect for impactful headlines, introductions, or storytelling sections, the Text Reveal effect blends seamlessly with modern design aesthetics. Its fluid transitions ensure a polished look while adding an element of interactivity that keeps users scrolling and engaged. Whether you're building a modern portfolio, a cutting-edge product page, or a compelling narrative, the Text Reveal effect is a subtle yet powerful tool for elevating your design.

Please find below a simple example from our demo site:

• Scroll Reveal Text

How to Activate It

1. Open the Heading Settings;
2. Navigate to the Animation tab;
3. Select the 'Scroll Reveal' option, screenshot .

Options

• Target: Defines how the text is split and animated between Words, Characters, and Lines.
• Starting Opacity: Sets the starting opacity of the Heading before the Text Reveal effect.
• Animation Speed: Determines the inertia speed of the effect. Note that since this is a scroll-based effect, the actual speed will depend on the page's scrolling.
• Start From Top: Specifies when the animation begins, using a Viewport Height value. For example, a value of 100 will start the effect when the text enters at 100% of the viewport height, while a value of 50 will trigger the animation when the Heading reaches 50% of the viewport height.

Notes

• Please note that this type of animation is also one of the Special Animations. If you are experiencing issues, we recommend checking the instructions in the 'Animated Headings don’t work' section;
• Please note that "elastic scrolling" of some mobile browsers is disabled when using these effects because the overscroll-behavior property is deactivated, as the bouncing scroll effect can cause unexpected issues.