Elementor Custom Text Reveal Entrance Animation

Elementor Custom Text Reveal Entrance Animation

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.

 

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

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

Comments

5 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

      to make it like a text editor element.

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

Leave a Reply