In this tutorial, I will show you how to create an Elementor text reveal on scroll.
We have fours different variations for this.
For variation 1 and 2, 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 transparent.
See the demo here for variation 1 and 2:
For variation 3 and 4, the sentences are sequentially made brighter, one sentence at a time.
Variations 1 and 3 are sticky, while 2 and 4 scroll normally.
See this demo for variation 3 and 4:
Features:
- Polyvalent: Works with any amount of scroll reveal texts on the same page
- Responsive: Works on desktop, tablet and mobile
- Customizable: Set any color, opacity, font and font size that you want
- Lightweight: Performant animation, lightweight code
- Few dependencies: Usually you will see this kind of animation requiring GSAP and GSAP Scroll trigger. Here, we don't need those libraries. We only need the very small "Split type" library (for variation 1 and 2).
- Easy to replicate: copy paste the template, adjust a few settings, et voila!
Variation four is similar to what the AirPods Pro 2 salespage has.
Let's get started!
First, import the template of your choice
This is a premium tutorial. Purchase access to unlock the full tutorial.
24 Responses
The animation works fine, but some letters like g's and p's seem to be cut on the bottom. Why is that?
Greetings Klaus!
It depends on your line height, and maybe some other CSS. Could you share your page URL with me I will have a look.
Hi Maxime,
Thanks for this great effect! I have added to some text on https://pixxels.pixxels.dev/onze-werkwijze/ but somehow its not working for the pieces of text between the text. Do you know what I should change in the text to also get those pieces of text working?
Thanks again for the great help!
Kind regards,
Bjørn
Pixxels
I see my comment is not coming true, I used the B html tag to make some pieces bold. Those bold pieces are not being shows right now.
Kind regards,
Bjørn
Pixxels
Hey Bjørn!
Sorry this is not possible with this design... the line splitting removes any inner HTML element, such as <b> and <strong>.
I tried to find some method to make it work anyway, but it's creating problems...
Hi Maxime,
Thanks for letting me know and even without that functionality it still looks awesome!
Kind regards,
Bjørn
Hi Maxime-
The effect works great on chrome however doesn't work on Safari. I've tested the demo itself and don't see any errors in the console so I'm not sure if the update is supported on Safari.
Specially variation 1 and 2
Thanks James for letting me know about this!
I thought I had tested it there but apparently not...
In any case, I found that for whatever reason there, the clamp() on the background-position-x property needs to be inverted to work. So instead of clamp(0%, calc(), 100%) , on Safari what works is clamp(100%, calc(), 0%)
I fixed it now, seems to work well on Safari desktop and mobile.
Note that I had to force a quick animation on Safari desktop to prevent a glitchy bug there too...
Just tested it and it's working great on Saferi desktop and mobile, NICE WORK!
The effect is not working on the mobile version of the iPhone and in Safari on the desktop. I need help!!!
https://agenciamakewl.com.br/home
Greetings Kainan!
I see you have modified the code provided, that's the issue.
Please revert back to the HTML element that comes in the template, and it will work. If not, let me know I will have another look then.
Hi Maxime,
Somehow, the code doesn't work for me as well on my Safari. I'm using the standard HTML provided.
Could you take a look?
https://www.chefsracing.nl/
Greetings Michel!
The issue in your case is that there is some smooth scrolling added to the page, and it's interfering a bit.
Thankfully there is a simple solution:
Change this part of the code:
transition: 0.14s; /* on safari desktop, force a quick transition to prevent glitchy bug */
To this:
transition: none; /* on safari desktop, remove the transition and rely on the smooth scrolling */
Cheers!
Hi Maxime,
Thanks for the reply! I changed the code. Unfortunately, it's still not working. Do you have any other ideas?
Hey Michel!
I visited your site on Safari MacOS and Safari iOS, and it works really well now. What issue are you still having? Are you certain you cleared all the cache?
Cheers!
That is weird, I can not see the code working. Even in an incognito screen...
From what devices and OS are you checking?
iPhone XS Safari, iPhone 13 Pro Safari, and Macbook Safari.
Hey Michel!
Sorry about these issues. I was able to replicate the problem indeed on iOS 17.3 .
I have fixed it now. Please copy paste the template on your page again, delete everything except the HTML element, delete the old HTML element, and you will still want to change this part of the code:
transition: 0.14s; /* on safari desktop, force a quick transition to prevent glitchy bug */
To this:
transition: none; /* on safari desktop, remove the transition and rely on the smooth scrolling */
As you have smooth scrolling on your page.
Let me know how it goes!
Cheers!
Perfect, thanks! It also works in v3.20, awesome!
Hi Maxime. I purchased the tutorial and cannot get the animation to work on mobile. On desktop it works great, just not mobile. I'm a bit disappointed.
It looks like kainanvalerian (comment above) is also having the same issue.
Any ideas? Help appreciated.
Welp, I take that back, I was using the old HTML code, the latest version you posted seems to work now. Thanks anayway!
Hey Alvaro!
Glad to hear it's all working as it should!
Just let me know if you have any problems, I will help!
Cheers!