How to Add Scroll and Entrance Animations in Elementor Without Code

Motion is one of the easiest ways to make a website feel alive. A headline that gently fades in, a row of cards that slides up one by one, an image that scales slightly as you reach it. Done well, these details guide the eye and make a page feel crafted rather than assembled.

For years, adding this kind of movement in Elementor meant choosing from a fixed list of entrance animations or reaching for a third-party plugin. The Atomic Editor changed that with Interactions, a dedicated system for animating elements without writing a single line of code. In this tutorial you will learn how Interactions work, how to build smooth entrance and scroll animations, and how to keep them fast and accessible.

Interactions in a Nutshell

Interactions live in their own tab in the editor panel, right next to the General and Style tabs, whenever you select an atomic element. Each interaction is made of a few simple ingredients:

• Trigger: the moment the animation starts.
• Effect: what visually happens, such as a fade, slide, or scale.
• Type: whether the element animates in or out.
• Direction: up, down, left, or right for movement-based effects.
• Duration and Delay: how long the animation runs and how long it waits before starting.

The first phase, Entrance Interactions, arrived while the Atomic Editor was still in testing and offers two triggers: On page load and On scroll into view. With Elementor 4, Pro users gained richer interactions that respond to hover, click, and scroll position, and that can be configured separately for desktop, tablet, and mobile.

Before You Begin

Interactions work on Atomic Elements, so make sure the Atomic Editor is active on your site. On new Elementor 4 installations it is enabled by default. Update Elementor to the latest version, and use a staging copy if you are experimenting on a live client site.

How to Add Your First Entrance Animation

Let us animate a hero heading so it fades and slides up when the page loads.

1. Select an atomic Heading in your hero section.
2. Open the Interactions tab in the panel.
3. Add a new interaction and set the trigger to On page load.
4. Choose the Fade effect with the type set to In.
5. Set the duration to around 0.6 seconds and leave the delay at zero.
6. Click Preview to replay the animation and fine-tune the timing.

Now add a subtle slide. You can stack several entrance effects on one element, so add a Slide effect with the direction set to Up and the same duration. The heading now rises a little as it fades in, which feels far more natural than a plain fade.

Revealing Content as Visitors Scroll

Page-load animations are great for the hero. For everything below it, On scroll into view is usually the better trigger, because the animation plays when the visitor actually reaches the content.

A classic pattern is a three-card features row:

1. Select the first card and add an interaction with the trigger On scroll into view.
2. Use Fade plus Slide Up with a duration of 0.5 seconds.
3. Repeat for the second card with a delay of 0.15 seconds, and the third with 0.3 seconds.

This small stagger makes the cards appear one after another, which draws the eye across the row. It is one of the cheapest tricks for making a page feel professionally designed.

Picking the Right Effect

Effect	Works well for	Avoid when
Fade	Almost anything; the safest default	Large blocks of text that people want to read immediately
Slide	Cards, images, list items, section intros	Long distances that feel like the content is falling in
Scale	Images, icons, badges, call-to-action buttons	Text, which can look blurry while scaling

Hover, Click and Scroll Interactions with Elementor Pro

With Elementor Pro, Interactions go beyond entrances. Instead of choosing a canned animation, you describe how an element should change between states and what should trigger that change. Typical uses include:

• Hover: cards that lift slightly and deepen their shadow when the pointer moves over them.
• Click: a panel that expands or a component that changes appearance when tapped.
• Scroll: elements that move or fade in proportion to how far the visitor has scrolled.

Because these settings can be adjusted per breakpoint, you can keep a rich scroll effect on desktop and switch it to something simpler, or turn it off entirely, on mobile.

For simple hover color or shadow changes, remember that you may not need an interaction at all. Class States such as hover and focus are often the lighter and cleaner choice for those.

Timing Guidelines That Feel Natural

• Keep durations short. Between 0.3 and 0.8 seconds works for most UI animation. Anything over one second starts to feel slow.
• Use delays sparingly. Small staggers of 0.1 to 0.2 seconds look polished. Long delays make visitors wait.
• Keep movement small. Content that slides a short distance feels refined; content that flies across the screen feels distracting.
• Be consistent. Use the same effect and timing for similar elements across the site, so motion feels like part of your design system.

Performance and Accessibility

Animations can hurt both speed and comfort if you are not careful:

• Do not animate the main hero image on load. Delaying your largest visible element can hurt your Largest Contentful Paint score. Animate supporting elements instead.
• Avoid animating everything. Pick the moments that matter. If every element moves, nothing stands out.
• Respect reduced motion. Some visitors set their device to reduce motion because animation makes them dizzy. Keep effects subtle and test your site with that setting turned on.
• Test on a real phone. What looks smooth on a powerful laptop can stutter on an older mobile device.

Interactions Versus the Old Motion Effects

If your site still uses classic widgets, you will also see the older Motion Effects and Entrance Animation options in the Advanced tab. They still work and you can keep using them on legacy content. For new layouts built with Atomic Elements, Interactions are the modern path: cleaner output, per-device control, and effects you can stack and fine-tune.

Troubleshooting

• The Interactions tab is missing. You probably selected a classic widget. Interactions are available on Atomic Elements.
• The animation does not play on the live page. Clear your cache and any CSS or JavaScript optimization plugins, then reload in a private window.
• Elements flash before animating. This usually comes from aggressive JavaScript deferral in an optimization plugin. Exclude Elementor's frontend scripts from delay settings.
• Content jumps on mobile. Reduce slide distances or disable that interaction on the mobile breakpoint.

Wrapping Up

Interactions give you a clean, code-free way to add motion to Elementor sites. Start small: a fade on the hero heading, a staggered reveal for feature cards, a gentle lift on hover. Keep the timing short and the movement subtle, and your pages will feel smoother without becoming distracting.