Elementor: Greatly Improve the Entrance Animations
Get Premium

Elementor: Greatly Improve the Entrance Animations

Element.How also offers premium tutorials! Check them here:

Elementor: Greatly Improve the Entrance Animations

Table of Contents

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

Elementor Underline On Scroll Animation

Elementor Add Animation to AJAX Loaded Content

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!

Elementor: Greatly Improve the Entrance Animations

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

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

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

31 Responses

  2. Yeah nice, i always thought elementor animations looked cheap, tacky and what you expect too see from really cheap developers or plugins.

    Peace.

  4. 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)

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

  7. 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?

  9. 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);

      1. Can you please help me with this? I have a lot of flickering on chrome. What can I do?
        Greats!
        Maria

      2. Hey Maria!

        Try this CSS, on the parent sections of the elements that are animated:

        selector {
        -webkit-transform:translate3d(0,0,0);
        }

  13. 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

    1. Hey Vassos!

      To use in a Code Snippets, write it that way:

      add_action( 'wp_head', function () { ?>

    1. Greetings,

      Try this CSS, add it somewhere global.

      .elementor-element.elementor-element {
animation-delay: 0.5s;
}

      Cheers!

  16. 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?

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

Leave a Reply