Entrance Animation
First impressions stick. Instead of letting your content just appear, make it arrive. The Entrance Animation extension adds motion to any Elementor element the moment it scrolls into view, with 70+ effects to pick from: fades, slides, bounces, flips, and zooms. You set the speed, the delay, and the easing, so a heading can drift in gently while a row of feature icons pops in one after another. No CSS, no keyframes, just a few settings in the Advanced tab.
Use it well and an entrance animation pulls the eye down the page and makes the site feel alive on the first scroll. Use it on everything and it turns into noise. The video below covers the basics, and further down I get into the full effects list, how to apply one animation across a whole section, and how to get the timing right.
What Is an Entrance Animation?
An entrance animation is the motion an element makes as it comes onto the screen. The visitor scrolls, a heading or image or button hits the viewport, and it fades, slides, or bounces into place instead of having been sitting there the whole time. You will see them called entrance effects, scroll animations, or a website entry animation. Same idea each time: a static page that starts reacting as you move down it.
You can write all of this yourself with CSS animations. Then the keyframes are yours to maintain, and so is the responsive behavior on every screen size. The Master Addons animation toolkit moves that into the element settings, so you pick an effect from a dropdown and skip the code.
A Library of 70+ Entrance Effects
With over 70 presets, there is a fitting way to introduce almost any section. Want it quiet? Fade In. Want energy? Bounce or Rubber Band. After something more deliberate? Flip or Slide. That spread is handy because it lets you give sections their own character: calm and smooth for a mission statement, a bit playful for the features row.
- Fades: Fade In, Fade In Up, Fade In Down, and the rest, for quiet arrivals.
- Slides: elements glide in from the left, right, top, or bottom.
- Bounces: Bounce and Rubber Band for a section that needs to be noticed.
- Rotations and flips: Flip and Rotate when you want a little depth.
- Zooms and special effects: Zoom In, Light Speed, and other standouts for a hero or a CTA.
- Match the effect to the job: the loud ones on a call to action, a soft fade on body text.
- Preview before you commit: the editor plays the animation as you hover over it in the list.
Duration, Delay, and Easing Control
Timing is where most animations are won or lost, and this is more than an on/off toggle. Set the Duration in milliseconds to make a move quick and snappy or slow and drawn-out. Add a Delay so a row of items comes in one after another instead of all at once. Pick an Easing curve so the movement speeds up and slows down the way a real object would, rather than sliding at a flat, robotic pace.
- Set the speed: 500ms feels brisk, 1500ms feels relaxed. That one number changes the whole mood.
- Stagger a sequence: bump the Delay up a notch on each icon in a row and they pop in one by one.
- Pick the easing: Ease-Out (quick start, gentle stop) reads as natural for most entrances. It’s the one I reach for first.
How to Set a Default Entrance Animation for All Elements?
People ask this a lot: can you apply one entrance animation to everything at once in Elementor? Straight answer, Elementor core has no single global switch that animates every element on the site. What works in practice is to animate at the container or section level, then reuse those settings.
- Select the section or container instead of each widget inside it. Open Advanced → Master Addons Entrance Animation and choose your effect. The whole block then arrives together as it scrolls in.
- To reuse the same motion, right-click the element, hit Copy, then Paste Style onto the next section. The animation settings ride along with the style, so you set it once and paste it down the page.
- For a cascade rather than everything firing together, keep the effect the same and raise the Delay a little on each section as you go down.
That gets you a consistent entrance animation across all your elements without touching code, which is as close to a default as Elementor gives you. The full Entrance Animation documentation covers every setting.
Where Entrance Animations Help Most?
- Hero sections: a Fade In Up on the headline, then a short delay on the button under it.
- Feature rows: stagger the icons so they land one by one.
- Stats and counters: a Zoom In as the numbers scroll into view.
- Testimonials and logos: a soft fade so they don’t snap in abruptly.
- Calls to action: a Bounce or Rubber Band at the point where someone decides.
The extension comes with the wider Master Addons widgets and extensions. The pricing page shows which plan it lands in.
Frequently Asked Questions For Entrance Animation
Will a lot of entrance animations slow down my website?
On a page with dozens of animated elements it can add some weight, but the effects are light to begin with. The real fix is restraint: animate the key sections and headlines, not every paragraph. A few well-placed ones barely register. If load time is on your mind, these tips to speed up Elementor sites help.
Why is my Elementor entrance animation not working?
It’s usually one of three things. The animation only fires the first time the element enters the viewport, so scroll down fresh to test it rather than scrolling back up. Make sure the effect is on the actual element and not an empty wrapper around it. And clear your caching plugin after you publish, since a cached page will serve the old version without the animation.
Can I use different animations on desktop and mobile?
No. You can’t set the animation independently for desktop, tablet, and mobile in Elementor. Whatever effect you choose applies on every breakpoint, so pick one that still looks right on a small screen.
What is the Easing setting and which one should I use?
Easing controls the pace of the motion. Linear holds one constant speed and can feel robotic. Ease-Out starts quick and ends slow, like something rolling to a gentle stop, which feels natural. Ease-In does the opposite. For most entrance animations, go with Ease-Out.
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Glassmorphism
Container Extras
Patterns
Post/Page Duplicator
