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?

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.

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0,100%,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.fadeInUp {
    animation-name: fadeInUp
}

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.

 /* Improved Animations Stylesheet from https://element.how/elementor-improve-entrance-animations/ , works for the 'fade' animations */

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translate3d(0,-30px,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.elementor-element.fadeInDown {
    animation-name: fadeDown
}

@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translate3d(-30px,0,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.elementor-element.fadeInLeft {
    animation-name: fadeLeft
}

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translate3d(30px,0,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.elementor-element.fadeInRight {
    animation-name: fadeRight
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translate3d(0,30px,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.elementor-element.fadeInUp {
    animation-name: fadeUp
}

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!

Comments

10 Responses

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

    Speaking of which, dude, you need to make your site look a lot better aesthetically. It kinda looks, dare i say, cheap and amateurish and the thing is, there's heaps of great content here.

    Peace.

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

Leave a Reply