Let's be straight talking here, the default Elementor animations kind of suc...h as they are. I'm certain you often found yourself wondering 'do they really have to come ALL that way?'.
See the before and after demos. Which one do you prefer?
You can also check out these related premium tutorials:
Elementor Replay Entrance Animations Each Scroll Down
Elementor Custom Text Reveal Entrance Animation
The problem with Elementor animations
We will focus mostly on fade In Up, Down, Left and Right animations, as the others are pretty much disqualified to be on a website from the start. In some rare cases, they might have some use, but for the most part, they belong to the old days of web design (thank god).
Here is where the problem comes from. This is the default Elementor code for the fadeInUp animation, and essentially the same code is used for the four directions.
<script> /* Please login to get the code * The code will be for the Elementor: Greatly Improve the Entrance Animations tutorial * Found at this URL https://element.how/elementor-improve-entrance-animations/ */ </script>
As you can see, there is this 'translate3d(0,100%,0)' line. That's the root of the problem... It means that whatever the size of the animated element, it will move that much before getting into place.
That's why these look so dated and poorly made... Instead of having a nice, subtle entrance animation, the whole page looks like it's jumping about with stuff flying everywhere.
Fixing the Elementor entrance animations by replacing them
To fix this problem, all we have to do is simply add this CSS to our website. It can be in the WordPress customizer > additional CSS, in the child theme styles.css file, in a Code Snippet, or anywhere else... It will work.
The code replaces the animations with the exact same, except that now it will move only 30px, no matter if the element is a full screen section, or a small heading.
The consistency across your fadeIn animations will make your Elementor website look much more professional, and the subtlety will be appreciated by your visitors.
<script> /* Please login to get the code * The code will be for the Elementor: Greatly Improve the Entrance Animations tutorial * Found at this URL https://element.how/elementor-improve-entrance-animations/ */ </script>
How to use? In the exact same way as before... just add one of the fadeInUp, Down, Left, Right animation as you normally would, but now it will have this improved styling!
Conclusion
I hope you will agree with me this is a much better option! Let me know if that worked well for you in the comments, and show me your page!
31 Responses
Thank you hermano. Gracias!
Yeah nice, i always thought elementor animations looked cheap, tacky and what you expect too see from really cheap developers or plugins.
Peace.
Thanks man!
I get the following error when using this code in a snippet:
The code snippet you are trying to save produced a fatal error on line 1:
syntax error, unexpected 'fadeDown' (T_STRING)
Read my 'Code Snippets' tutorial to find out how to fix this! Now you added CSS there, where it only accepts PHP. https://element.how/elementor-code-snippets/
Can I do the same the other entrance animation ? like SlideIn Up, Down ?
Yes definitely!
Simply modify the source code in a similar way, and give them a different animation name, like the way I wrote the fade animations above!
Thanks!
Is there a way we can add also a Fade Out when you scroll down?
Not with the same system, no...
It is still possible, if you have Elementor Pro, using the Scroll Effects. You will get something similar to what you want.... More info here : https://elementor.com/help/scrolling-effects-vertical-scroll/
This code doesn't seem to override the default animation settings anymore since one of the latest elementor updates, at least on my sites. Can someone confirm that? Any idea how to fix that?
Found the error 🙂 Works fine now. Thank you for all the helpful information you provide here.
Hi Phil,
How did you get it right? I seems to have the same problem. Thanks
I never liked the full slide of standard elementor... you made my day! works fine and looks great now.
thanks a lot
Cheers welcome! Really glad you like it!
Experienced a lot of flickering on Chrome for iOS after implementing these nifty entrance animations. Use this on the parent element to avoid:
-webkit-transform:translate3d(0,0,0);
Thanks for sharing Aske! Very helpful!
Can you please help me with this? I have a lot of flickering on chrome. What can I do?
Greats!
Maria
Hey Maria!
Try this CSS, on the parent sections of the elements that are animated:
selector {
-webkit-transform:translate3d(0,0,0);
}
Thank you, it works so well.
Thank you very much! A very nice and elegant customization.
Glad you like it, Luigi!
Just what I was looking for. Many Thanks.
Welcome!
Thank you for this post.
I have a question. I get this error when I enter this in Code Snippets
The code snippet you are trying to save produced a fatal error on line 3:
syntax error, unexpected 'fadeDown' (T_STRING)
I don't understand what I have to add to the code to make it work.
Any help is appreciated.
Thanks again
Hey Vassos!
To use in a Code Snippets, write it that way:
add_action( 'wp_head', function () { ?>
♥♥♥♥♥♥♥♥♥
I was wondering, is there anyway to set 500ms delay across all entrance animations?
Greetings,
Try this CSS, add it somewhere global.
.elementor-element.elementor-element { animation-delay: 0.5s; }Cheers!
This looks great "but" I'm putting it in the column custom css panel and it does not seem to be over-riding the full width animation. Can you advise?
Greetings,
I'm not certain I understand what you mean by "full width animation"... Could you maybe please share your URL with me where you have this, along with let me know what animation I should look for.
Cheers!