Get Premium

Elementor Custom Text Reveal Entrance Animation

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

Table of Contents

In this tutorial, I will show you how to create this nice and trendy entrance animation with Elementor.

It's a text reveal, or text clip in, entrance animation.

There are two variations, both of which have adjustable timings. Line by line, and word by word.

In the demo, heading 1 and 4 are word by word. While heading 2 and 3 are line by line.

See the demo here (reload by clicking the icon in the top right corner):

Features:

  • Automatically responsive
  • Adjustable timings
  • Line by line version
  • Word by word version
  • Easy to replicate

Purchasing this tutorial also gives you access to the Elementor Fade In Up Line By Line Text Entrance Animation tutorial.

Let's get started!

First, copy paste this code in a new Code Snippet

This is a premium tutorial. Purchase access to unlock the full tutorial.

Access tutorial

$19/one time Purchase access

Includes

  • Gain Access to This TutorialUnlock complete access to the current tutorial: Elementor Custom Text Reveal Entrance Animation
  • 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

37 Responses

    1. Hey Mario!

      Not really no... the text has to be split line by line, so the text element, while it would work, would not keep it's formatting properly. You could not have bold, italic, links, etc.

      So that's why I used the heading element. If you want, you can change the tag to <p> to make it like a text editor element.

  3. Thanks a lot for this code. Couple of things:

    1. I prefer to minimise the amount of plugins on my website. So instead if installing Code Snippets, I used the Elementor "Custom Code" section. I also removed any code outside of the ...

    This meant this was removed:
    add_action( 'wp_footer', function () { ?>

    and

    <?php } );

    Is that ok? Will it still work fine?

    2. I find that the line-by-line code doesn't work for me. I've tried using Code Snippets plugin too but it just doesn't seem to work

    Many thanks!

    1. 1. Yes it's okay
      2. hmm the line by line code should work.. the class name given to the element is different then, did you change this as well? If so, I'd need to see your page to find out the problem.

      Cheers!

    1. Hey Andonis!

      You need the class name "textLineReveal" on your heading elements, and not "textWordReveal", as you are using the line by line version!

      Cheers!

  5. Hi again Maxime,
    I noticed that some of the letters (all the 'y's) are getting chopped off at the bottom of each line. I tried wider margins, but that doesn't seem to be the problem.
    Do you think you can help me put a wider margin somewhere within this code?

    Cheers!

      1. Thank you very much! I didn't think of that:-)
        It didn't work at first by px but when I tried 1.5 em's, it worked:-)

  6. Hey Maxime,

    I'm having a similar issue with the above re line height. I don't want to change my line height (it's set as auto/default.) as increasing it would make the typography not feel right/un-natural between each line.

    Is there no other fix for this? Without the text effect it all looks great, with the effect it starts cutting the the Y's etc etc.

    1. Hey Will,

      Add line height enough to fix the issue. Then, depending on which version of the code you are using, add either this CSS for the line reveal version:

      .textLineReveal .elementor-heading-title .line {
    margin-bottom:-10px;
}

      Or this CSS for the word reveal version:

      .textWordReveal .elementor-heading-title .word {
    margin-bottom:-10px;
}

      Adjust that negative px value until you have the line height that you want.

      Cheers!

      1. Ah nice - was trying a few 'hacks' but didn't think of this one! Legend

  8. Hi Maxime,

    I can't get it to work. I've downloaded code snippets and added the code as "php".

    For some reason my heading just disappears when I add the css-class and load the page.

    Cheers 🙂

    1. Hey Ben!

      Sorry about that. I made an update to the code recently and it looks like while doing that WP auto formatting broke the markup in my code snippets....

      I fixed it now, please just copy paste the code again and it should work!

      Cheers!

  10. Hey Maxime!

    Absolutely love this code, it's a truly lovely effect.

    I have this small problem where the bottom of the g and y is cut off by the overflow: hidden part.

    So when the animation is finished, it should allow the overflow to become visible.

    A fix for this would make it a perfect 10/10.

    Thanks
    Nol

      1. Thanks Maxime, should've looked closer!

        May I contact you to potentially commision custom work?

  11. Thanks for this! However once I've done this - the bottom of the letter 'g' is cut off by the mask. is there a fix to expand the mask at all? Thanks!

  12. I have watched a lot of tutorial-youtube-videos and they all make it so difficult, while this one is so easy to use. It even works on multiple lines in combination with ACF. Thank you! Worth every dollar!

    1. Welcome Kristof!

      I endeavour to make my tutorials as easy as possible to use and customize. So I'm really glad to read this!

  14. Hello Maxime - the css you provided for the y and g being cut is not working - i have a huge gap between 2 lines because i had to set height to 1.3 em to show the bottom of letter.

    I tried applying the code:
    /* fix height issue */
    .textWordReveal .elementor-heading-title .word {
    margin-bottom:-10px;
    }

    Whatever value i put there it still the same.

    Any help would be much appreciated: my site: https://gamma.crealysdigital.com/

    1. Greetings!

      Try this CSS instead please:

      /* fix height issue */
      .textWordReveal .elementor-heading-title .line {
      margin-bottom:-10px;
      }

      Cheers!

      Maxime

  16. Hello, first of all thank you! Awesome tutorial. Is there a way to make the animation not repeat itself whenever I resize the browser's window? Thank you.

    1. Sorry this isn't possible... most users should not be resizing their browser anyway... I think it should not be much of a problem.

Leave a Reply