Table of Contents
In this tutorial, I will show you how to create a very nice little Elementor text reveal on scroll. We will be using GSAP for this.
The effect is almost that of text being written in, as the user is scrolling down. It is directly linked with the scroll position.
You can either have the upcoming text partly shadowed out, or completely. In the first demo, it's partial. In demo 2, the upcoming text is fully transparent.
See the demo here:
Here is another demo, from an actual live website. Credits to Alexander Ramsey.
In fact, credits also go to Alexander for getting me working on this effect to start with. I originally coded it for him, to incorporate in that website. If you are looking for a great designer to help you with a project, I wholeheartedly recommend Alex, he is really good.
Features:
- Works with sections & columns, or containers
- Works with any amount of scroll reveal texts on the same page
- Works on desktop, tablet and mobile
- Any color you want, for both the before and after text
- Performant animation
- GSAP + GSAP Scroll trigger are used
- Easy to replicate: copy paste the code, add class names, et voila!
Let's get started!
First, copy paste this code on the page where you want the Elementor text reveal on scroll
This is a premium tutorial. Purchase access to unlock the full tutorial.
Element.how also provides premium tutorials showing awesome advanced designs, check them out here.
And get exclusive Elementor related discounts here
Checkout the Elementor Addon Finder directly
