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
16 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!
Hi Maxime,
Could you also pls take a look for me to see if it's actually working?
I'm not sure it does and I first used the 'Custom CSS' to place the code (without the initial lines of code as per other user above), then installed the 'Code Snippets' plugin and placed the 'line by line version'.
This is the temp page
https://wordpress-822188-2825369.cloudwaysapps.com/about
Thank you!
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!
Thank you!
This worked beautifully 🙂
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!
Simply increase the line-height in the font settings for that Heading element!
Cheers!
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:-)
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.
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!
Ah nice - was trying a few 'hacks' but didn't think of this one! Legend
Hi, the script " https://unpkg.com/split-type" is gone.
any posibble way to fix this?
Hey Marco!
What do you mean exactly? Everything is still working for me...