Elementor Custom Text Reveal Entrance Animation
CSS Course ➜
CSS Course Chapters

Elementor Custom Text Reveal Entrance Animation

Check out our CSS Course, made especially for Elementor users.

CSS Course For Elementor Users

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

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.

 

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

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

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

Comments

21 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 .line {
    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!

Leave a Reply

Become the CSS ninja your were meant to be with our CSS course for Elementor users!

CSS Course For Elementor Users
Elementor Custom Text Reveal Entrance Animation

Awesome new Elementor designs, right in your inbox.

Just fill in your email.

Navigation

Quick links

Social

Make a donation:
Created by
Elementor Custom Text Reveal Entrance Animation