Elementor Text Reveal on Scroll

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:

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:

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
  • 30 day 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.
  • Great supportGet help when you need it. Support includes getting things working as intended.

    Support excludes customization work.
  • 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.

    I will say that it is definitely my intention to keep adding tutorials to Element.how.
* 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 2737 Elements right here:

Checkout the Elementor Addon Finder directly

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

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

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

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

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

Leave a Reply