Get Premium

Elementor Text Reveal on Scroll

Element.How also offers premium tutorials! Check them here:

Table of Contents

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:

Copy Template
Download Template

Please purchase access and be logged in to access this template.

 

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:

Copy Template
Download Template

Please purchase access and be logged in to access this template.

 

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.

Access tutorial

$49/one time Purchase access

Includes

  • Gain Access to This TutorialUnlock complete access to the current tutorial: Elementor Text Reveal on Scroll
  • Future UpdatesYou will get access to all future updates to this tutorial.
  • Enjoy Unlimited UsageUse on as many of your own sites or your clients sites as you wish.

    Note that reselling or redistributing is not permitted.

Access everything

$299/one time Purchase All Access

Includes

  • Unlock every premium tutorial on Element.howGet access to the entire library of premium tutorials on Element.how
    Preview premium tutorials
  • Get access to the CSS course for Elementor usersAccess the complete 14 HTML chapters, 30 CSS chapters and 7 Elementor Projects.Learn more
  • Simple CSS Grid For ElementorAn Elementor Addon to Create Awesome Grid Layouts in a Single Click for Containers, Galleries and Loop Grid. Learn more
  • free extra: ShapeDividers.com Premium AccessLifetime Premium Access to ShapeDividers.comVisit ShapeDividers.com
  • 6 months money backNo questions asked money back. Not what you expected? Get a refund.
  • One-time payment of only $299No hidden fees or subscriptions.

    Sales taxes added where applicable.
  • Support not needed!Due to personal circumstances, I no longer offer support. The vast majority of customers never needed support to start with, so chances are you will be just fine, the tutorials and templates provided are complete.

    I also extended the refund window from 1 to 6 months, during which you can get a full refund for any reason.
  • Lifetime access to everything Element.howThe price reflects what is currently available on Element.how. All future updates are included, but none are promised. You pay for what is available now, and the rest is a sweet extra.
* All prices are USD. Applicable taxes will be charged at checkout. Have a question? See the FAQ or email me.

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2927 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

41 Responses

    1. 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.

    1. 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

      1. 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...

  4. 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.

    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...

      1. Just tested it and it's working great on Saferi desktop and mobile, NICE WORK!

    1. 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.

    1. 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!

      1. Hi Maxime,

        Thanks for the reply! I changed the code. Unfortunately, it's still not working. Do you have any other ideas?

    2. 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!

      1. That is weird, I can not see the code working. Even in an incognito screen...

    4. 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!

  7. 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.

    1. Welp, I take that back, I was using the old HTML code, the latest version you posted seems to work now. Thanks anayway!

      1. 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!

    1. Greetings!

      Yes it's possible. Change this part of the JS code (be careful, it's present 2 times, you need to change it both places)

      let backgroundXPos = Math.min(Math.max( (1 - (scrolledRatio * splittedText.lines.length - index)) * 100, 0), 100);

      to this:

      let backgroundXPos = Math.min(Math.max( ((scrolledRatio * splittedText.lines.length - index)) * 100, 0), 100);

      And change this part of the CSS (near the start)

          background: linear-gradient(to right, var(--text-reveal-after-color) 50%, var(--text-reveal-before-color) 56%);
    background-size: 230% 100%;
    background-position-x: 100%;

      to this: 

          background: linear-gradient(to right, var(--text-reveal-before-color) 50%, var(--text-reveal-after-color) 56%);
    background-size: 230% 100%;
    background-position-x: 0%;

      This is for variations 1 and 2.

      Cheers!

  9. Hi Maxime, I'm encountering an issue that when I disable overflow* on the page, it also kills the text scroll animation - Any ideas on how to fix that?

    *I have to disable overflow because it creates unwanted margins in mobile.

  10. Hi. Everything works fine, except that it doesn't appear while scrolling as shown in the first example of Version 3. The text is only highlighted while scrolling, as in the second and third examples of V3
    Thank you!

    1. Greetings Veridia!

      Under the textLightUpWrapper container > Advanced > Custom CSS, do you have the

      --text-light-up-opacity-inactive: 0; /* text opacity when inactive */

      Set to 0 ?

      Cheers!

    1. Greetings Lesley!

      Add this line of CSS:

      white-space: nowrap;

      Here:

      .textRevealOnScroll .elementor-heading-title .line, .stickyTextRevealWrapper .elementor-heading-title .line {
      background: linear-gradient(to right, var(--text-reveal-after-color) 50%, var(--text-reveal-before-color) 56%);
      background-size: 230% 100%;
      background-position-x: 100%;
      color: transparent;
      background-clip: text;
      -webkit-background-clip: text;
      transition: background-position var(--text-reveal-transition-duration);
      white-space: nowrap;
      }

      Hopefully that should fix it.

      Cheers!

  12. Hi great script
    i was wondering i gave my heading
    html
    Every <span class="textsub">Project</span> starts with a dream. <br>Are you ready to furfill this <span class="textsub"> dream</span>?
    the class has diffarenr font
    from some reason its doesnt work for the span
    https://www.gayanat.com/new-home1/#contact
    any clues how it can be solved

    thanks

    1. Hey Eytan!

      Sorry, because we are splitting the text line by line, and then we are using background color along with background text clip for the animation, we can't have different text styling. It's a limitation of this design.

      You can try changing the line:

      background-position-x: 100%;

      to this:

      background-position-x: inherit;

      You will see that the word will fill up, but not at the same pace as the other words. Maybe that could work to give it more importance...

      Cheers!

  13. Hi,

    is it possible to use the text reveal for dynamic content like "Post content"? I can't add a html tag for these dynamic elements, so the template doesn't work for it. Anyway, great work!

    Lukas

    1. Greetings BG,

      Sorry it's not possible to work with line breaks, we are using a library that split the text by line automatically, and it interferes with manual line breaks.

      1. No worries at all. We revised it to make it work with a single paragraph so no big deal. Thanks for all you do. I've used two of your customized elements on a new homepage, the text reveal on scroll and the gallery story scroll you created with the Alexander the Great story as an example. It worked out great.

Leave a Reply