A block reveal animation can be very slick and impress visitors (and clients!). I prepared three demo pages that you can see here. All three pages are from Elementor Pro templates... I only added in the block reveal animations!
Elementor block reveal demo 01
Elementor block reveal demo 02
Elementor block reveal demo 03
You will find the codes snippets below to replicate these! Be certain to watch the YT videos to understand everything well!
Here is how to use the code snippets below:
First, under Advanced, add a CSS class name.
Give your Elementor element (or section, column or container) the class name ‘gen_intros01’, ‘gen_intros02', or ‘gen_intros03’, depending on which snippet you picked..
Then, give it the ‘Fade In’ entrance animation
And then, choose ‘fast’.under 'Animation Duration'.
After this, copy paste the chosen CSS code
Add it under custom CSS if you want to use this on only 1 element, or in Global CSS, or the theme customizer > additional CSS, to use across your website, on many elements.
Adjust the CSS
Watch the YouTube video to learn how to adjust the CSS to fit your project!
You can also purchase access to the CSS block reveal generator tool. It's optional but makes it very convenient to quickly come up with new variations of the animation.
The Elementor Block Reveal Animation CSS Codes
Block Reveal from Demo 01
<script> /* Please login to get the code * The code will be for the Elementor Slick Block Reveal Animations tutorial * Found at this URL https://element.how/elementor-slick-block-reveal-animations/ */ </script>
Block Reveal from Demo 02
<script> /* Please login to get the code * The code will be for the Elementor Slick Block Reveal Animations tutorial * Found at this URL https://element.how/elementor-slick-block-reveal-animations/ */ </script>
Block Reveal from Demo 03
<script> /* Please login to get the code * The code will be for the Elementor Slick Block Reveal Animations tutorial * Found at this URL https://element.how/elementor-slick-block-reveal-animations/ */ </script>
5 Responses
Thank you very much for great tutorial and snippet!
How do you achive the gap between Team Members columns in Demo 03?
I imported the same template - and they are using margin on the Team Members, wich make the animation go "outside" of the Team-memeber column/card.
Great question Kartel!
Indeed with Elementor we don't have any direct way to actually control the margin in between columns.
So I set the margin under Advanced to 0 (actually I just removed what they had, and left the fields empty). And then I added a bit of CSS to the parent section (the inner section, in this particular case) :
selector .elementor-column{
margin: 0 10px;
}
Thank you very much for everything. I have learned a lot by flowing your instructions and I’m very grateful for all of your work.
I would like to change the direction in which the block reveals the text in block no. 2 from sliding left to sliding right. How can I achieve that change?
Thank you,
Rafael
Hey Rafael!
I don't support RTL sites in my tutorials as I don't have enough experience working with them. Most tutorials should work for RTL just as well, but if not, you might need to get help from a RTL CSS dev.
Hello
I looked closely at your instructional video on YouTube and did exactly as describe. I can achieve the effect of sliding right in the elementor page but when I move over to the front page it keeps sliding left.
I would like to mention that I’m working on an RTL site and maybe it might trough some light on that issue.
Thank you