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

1 week 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

The CSS to make the animation for this power up is included in the top level parent container Advanced > Custom CSS. No additional setup needed. Just copy the component and the styles come with it.

/* 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;
  }
}