BLACK FRIDAY: 50% OFF all Pro plans Code: BLACKFRIDAY50
Pro from $10 a year or $30 lifetime, no code needed: Code: BLACKFRIDAY50
Ends Cyber Monday, 30 Nov. Lock in the price today. Code: BLACKFRIDAY50
Get 50% Off
Pro widget

Scroll Image Comparison Widget for Elementor Pro

Before and after images revealed as the page scrolls

Overview

What Scroll Image Comparison does

Scroll Image Comparison shows a before and an after image on top of each other. As the visitor scrolls down the page, the divider moves across and reveals the after image, with no clicking needed. Visitors can also drag the divider themselves.

Live demo

See it in action

Before After
Features

What it can do

  • The divider moves with the page scroll, from a start to an end position you choose.

  • Choose where on the screen the movement starts and ends.

  • Left to right or top to bottom.

  • Smooth Movement for a softer motion, and Play Once to stop the divider going back.

  • Visitors can drag the divider with the mouse, a finger or the keyboard.

  • Before and After labels that fade when their image is covered.

  • A handle with any icon, and divider color and width.

  • Fixed height per device, or the height of the After image.

Use cases

When to use it

Renovation results

Reveal the finished room as visitors scroll through a project page.

Photo editing

Show the edited photo taking over the original.

Website redesign

Compare the old and new design of a page in a case study.

Product changes

Show a product before and after an update or cleaning.

Setup

How to set it up

A few steps from adding the widget to a finished result.

  1. Drag Scroll Image Comparison onto the page.

  2. Choose the Before Image and the After Image, and type the labels.

  3. Set an Image Size, the direction in Divider Moves and, if needed, a Height.

  4. In Scroll Animation, set where the divider starts and ends and the screen positions in Start When the Widget Top Is At and End When the Widget Top Is At.

  5. Turn Smooth Movement, Play Once and Let Visitors Drag the Divider on or off.

  6. Style the box, divider, handle and labels in the Style tab, then preview the page and scroll.

FAQ

Questions and answers

Do visitors have to click anything?

No. The divider moves on its own while they scroll. Dragging is optional.

Can the reveal go the other way?

Yes. Set Divider Starts At to a low number and Divider Ends At to a high one, and the before image takes over instead.

Does it work on phones?

Yes. It follows the scroll on phones too, and in the left to right layout visitors can also drag the divider sideways without stopping the page from scrolling.

How is this different from Image Comparison?

Image Comparison in the free plugin is moved by the visitor. Scroll Image Comparison moves by itself with the page scroll, and can also be dragged.

Bright Addons Pro

Get Scroll Image Comparison with Bright Addons Pro

Bright Addons Pro has 98 Pro widgets plus all 56 free widgets, 10 extensions, a Theme Builder and 32 dynamic tags. From $10 a year, with a 14-day money-back guarantee.