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.
5 Responses
HI, Its possible to get this effect with elementor-text-widget too ?
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.
Hi Maxime
I will try a different approach for the text widget, maybe the default fade in behavior from elementor.
thz 😉
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. 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!