Smooth entrance animations

PRO

Refine Elementor’s default entrance animations with softer easing, shorter travel distance, and natural timing. A single CSS snippet that makes every fade-in feel intentional and polished.

Copy

Unlock with Pro

Released

3 months ago

Category

Custom code

CSS

Built with

Need help?

How it works

Replace Elementor’s abrupt default fade-in animations with smooth, professional entrance effects. Elementor’s built-in animations use a long travel distance, fast timing, and a generic easing curve — which can make elements feel like they’re snapping into place rather than flowing in.

This Power-Up overrides those defaults with a custom cubic-bezier easing curve, a shorter 32px travel distance, and a slightly longer duration — giving every animated element a natural, weighted feel. Just paste the CSS site wide and every existing fadeInUp, fadeInDown, fadeInLeft, and fadeInRight animation across your site is instantly upgraded. Includes a reduced-motion media query for accessibility.

Custom css

All you need to do is copy the css code below and paste it site wide. Then every existing fadeInUp, fadeInDown, fadeInLeft, and fadeInRight animation across your site is instantly upgraded. Includes a reduced-motion media query for accessibility.

/* Global Elementor entrance animations – subtle + consistent. Add this sitewide in custom css*/

/* base animation settings for ANY Elementor animated element */
.elementor-element.animated,
.elementor-widget.animated {
  animation-duration: .95s !important;
  animation-timing-function: cubic-bezier(.25,.1,.25,1) !important;
}

/* remap Elementor animation classes to your keyframes */
.elementor-element.animated.fadeInUp,
.elementor-widget.animated.fadeInUp { animation-name: euiFadeInUp !important; }

.elementor-element.animated.fadeInDown,
.elementor-widget.animated.fadeInDown { animation-name: euiFadeInDown !important; }

.elementor-element.animated.fadeInLeft,
.elementor-widget.animated.fadeInLeft { animation-name: euiFadeInLeft !important; }

.elementor-element.animated.fadeInRight,
.elementor-widget.animated.fadeInRight { animation-name: euiFadeInRight !important; }

/* keyframes */
@keyframes euiFadeInUp    { from{opacity:0; transform:translateY(32px)}  to{opacity:1; transform:none} }
@keyframes euiFadeInDown  { from{opacity:0; transform:translateY(-32px)} to{opacity:1; transform:none} }
@keyframes euiFadeInLeft  { from{opacity:0; transform:translateX(-32px)} to{opacity:1; transform:none} }
@keyframes euiFadeInRight { from{opacity:0; transform:translateX(32px)}  to{opacity:1; transform:none} }

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .elementor-element.animated,
  .elementor-widget.animated {
    animation: none !important;
    transition: none !important;
  }
}