Atomic Element · Free
A renovation, a retouch or a redesign is easier to believe when visitors drag the line themselves. Two photos, one draggable divider, styled like the rest of your Elementor 4 site. Free on Elementor Free.
The short answer
The Elementor before after image slider from Animation Addons is a free Elementor 4 Atomic Element called Image Compare. It layers a Before and an After image and lets visitors drag a divider, horizontally or vertically, to reveal one over the other. Images, divider, handle and labels are separate atomic children.
Many "Elementor V4 compatible" addons are classic v3 widgets running inside the new editor. The Animation Addons for Elementor Image Compare is a native Atomic Element, so the handle and labels use your Elementor 4 Classes and Variables.
| Plan | Free |
|---|---|
| Element type | Native Elementor 4 Atomic Element (composite) |
| Works with | Elementor Free and Elementor Pro, Atomic Editor on |
| Child elements | Before Image, After Image, Divider, Handle (with Handle Icon), Before Label, After Label |
| Settings | Direction (Horizontal / Vertical), Initial Position (%), Enable Click to Move |
| Presets | Horizontal (applied on drop), Vertical |
| Interaction | Mouse, pen and touch drag; optional click-to-jump; arrow keys through a labelled native range input |
| Page weight | One small script and stylesheet, no external library |
| Plugin version | Animation Addons for Elementor 4.3 · Last updated October 2026 |
Demo variations
Ideas you can build today with the Image Compare and native Elementor 4 elements. Cards marked Pro add an Animation Addons Pro extension or element; the rest work on the free plugin.
A wide kitchen photo, old on the left, new on the right; white divider, round handle, "Before" and "After" pills in the top corners.
A tall portrait split top to bottom; visitors drag the handle up and down. Thin divider, minimal arrow handle.
Old and new homepage screenshots in a browser-frame card, with the case-study story in a column beside it.
Three square comparisons in a row (seats, wheels, paint), each with a caption; stacked on phones.
A narrow phone mock-up; the old and new app screens swap as the visitor drags the handle up the screen. A brand-coloured custom handle.
A close-up of a worn sofa arm against the same arm after reupholstery, with large serif labels renamed "Worn" and "Restored".
Features
Every option below is a real control in the Image Compare panel or part of how the element renders. Nothing here needs custom code.
Direction switches between a left-right and a top-bottom split; cursor and handle orientation follow.
Initial Position (%) places the divider anywhere from 0 to 100, so you can lead with the image you want seen first.
With Enable Click to Move on, a click moves the divider to that spot. Turn it off in busy layouts so only deliberate drags count.
Before Label and After Label fade when the divider gets close to them, so they never sit on top of the handle.
Images, divider, handle, handle icon and labels are separate children with their own Style panels. Rename labels, swap the handle icon, or delete what you don't need.
Apply Preset offers Horizontal and Vertical; a fresh drop lands on Horizontal with sample photos.
Built on the atomic base
Why it mattersThe photos are standard Elementor 4 Image elements with alt text from the Media Library, and one Class can make every comparison on the site match.
Step by step
Six steps, from installing the plugin to publishing the page. The bold names are the exact labels you will see in the Elementor 4 panel.
Download freeInstall Animation Addons for Elementor and open a page with the Atomic Editor on.
Drag Image Compare onto the canvas. It lands with the Horizontal preset and sample photos.
Optional: Apply Preset → Vertical.
Select Before Image in the Navigator and choose your first photo, then After Image. Use two images with the same dimensions.
Set Direction, Initial Position (%) and Enable Click to Move.
Edit the labels, style the handle and divider, preview on mobile and publish.
Honest comparison
Elementor Free 4.3.3 ships no before/after element, so the choice is between a classic addon widget and an atomic one.
| Feature | Elementor Free 4.3.3 | Classic v3 before/after addon widget | Animation Addons Image Compare |
|---|---|---|---|
| Before/after element | No | Yes | Yes |
| Native Elementor 4 Atomic Element | Not applicable | No | Yes |
| Styled with Elementor 4 Classes and Variables | Not applicable | No | Yes |
| Handle and labels selectable in the Navigator | Not applicable | No, options inside one widget | Yes, separate children |
| Works on Elementor Free | Not applicable | Depends on the addon | Yes |
Compared with Elementor 4.3.3 (September 2026).
Who it's for
The people who get the most out of it, and what they use it for.
Proving the quality of their work.
Showing raw against edited files.
Presenting redesigns.
FAQ
Install the free Animation Addons for Elementor plugin and drag the Image Compare element onto your page. Choose your Before Image and After Image from the Media Library, set Direction and Initial Position, and publish. The Animation Addons Image Compare works on Elementor Free and does not need Elementor Pro.
Yes. Set the Animation Addons Image Compare Direction to Vertical, or apply the Vertical preset. The divider then moves up and down instead of left and right, which suits tall portraits, phone screenshots and full-page website captures. Initial Position still sets where the divider starts.
Before and after photos should share the same dimensions and framing so the divider lines up. Export both at the same width and height and pick the same size for each Image child in the Animation Addons Image Compare. A comparison loads two images, so export them at the width they are shown, not camera size.
Yes. The Animation Addons Image Compare responds to touch and pen drags on phones and tablets. It is built on a native range input with the label "Move image comparison slider", so keyboard users can Tab to it and move the divider with the arrow keys, and screen readers announce it as a slider.
Yes. Both photos in the Animation Addons Image Compare are ordinary image elements in the page HTML, with the alt text you set in the Media Library. Search engines and AI crawlers read them like any other image. Write a short caption or paragraph next to the comparison so the change is described in text too.
Turn off Enable Click to Move in the Animation Addons Image Compare settings. Visitors then move the divider only by dragging, so a click or tap while scrolling does not jump it. Leave the option on when you want a quick click to reposition the comparison.
Yes. Before Label and After Label in the Animation Addons Image Compare are separate text elements, so you can rename them ("March" and "July") or delete them. The Handle holds a Handle Icon you can replace with your own SVG, and both are styled from their own Style panels.
More answers in the FAQ · Documentation · Free vs Pro
Pairs well with
Elements that work well with the Image Compare on the same page or template.
A free, native Elementor 4 before/after slider that follows your design system.
