Elementor: Request: entrance animation distances

[joexcm]

It would be good to have the option for subtler animations with smaller distances.

E.g. 'fade in up' is a stylish entrance, but it has a large travel distance which looks slightly odd.

[bainternet]

@joexcm

Currently, this feature is not supported, but we will look into it in the future if we see a large demand for it.

for now, you can simply overwrite the animation CSS to match your needs.

Thanks for the feedback.

[iShubhamRaj]

For now, anyone looking to change the animations, add these lines to your custom CSS:

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -30%, 0)
    }
    to {
        opacity: 1;
        transform: none
    }
}
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-30%, 0, 0)
    }
    to {
        opacity: 1;
        transform: none
    }
}
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(20%, 0, 0)
    }
    to {
        opacity: 1;
        transform: none
    }
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 30%, 0)
    }
    to {
        opacity: 1;
        transform: none
    }
}

You can tweak the transform: translate3d percentage to suit your preferred distance of FadeIn. Percentage values are 100% in original Elementor CSS. I have tweaked them to around 30% for shorter distance of FadeIn.

[KingPrawnBalls]

Not sure why this issue has been closed? Seems so fundamental to making Elementor animations useful. Would love to see it implemented, so no more pasting custom CSS each time I want to use animations in a subtle way (i.e. every time!).

Thanks!

Related: https://github.com/elementor/elementor/issues/7073 (also closed)