Smooth entrance animations
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.
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.