BeforeAfter

Drag the handle to reveal what changed, then step through as many comparisons as you need. Each slide carries its own headline, tags, and caption card.

ABOUT COMPONENT

- Drag anywhere across the image to reveal the before layer

- Works with mouse, trackpad, touch, and arrow keys

- Animated transitions between slides

- Each slide holds two images, a headline, two tags, and a numbered card

- Autoplay with adjustable delay and pause on hover

- Set where the reveal starts, from 0 to 100 percent

- Images preload, so changing slides never flashes

- Sizes to its own width, so it fits any section or grid

- Reduced-motion aware, and stays still on the canvas while you edit

- Focus rings, ARIA slider role, and labelled controls

WHAT'S INCLUDED

- One code component, single file, nothing to install

- 4 demo slides to swap for your own images

- 20+ property controls for content, behaviour, and color

- A mobile layout that takes over below 810px

HOW IT WORKS

1. Drop it on your canvas and set width and height.

2. Add your image pairs to the Slides array, then write the headline and caption.

3. Pick your accent color, radius, and autoplay setting. That's it.

USE CASES

- Retouching and editing portfolios

- Interior design and renovation

- Skin, dental, and hair clinic results

- Fitness transformation sections

- Car detailing and paint correction

- Agency redesign case studies

KEYWORDS

before after, before and after slider, image comparison, drag to compare, comparison slider, reveal slider, framer carousel, image slider, transformation, autoplay carousel

REFUND POLICY

Due to the digital nature of this product, all sales are final and refunds are not available. Please review the product details and the live preview carefully before purchasing.

SUPPORT

If you experience any issues or need help customising the component, reach out within 3 business days of your purchase. Email: framercore@siddhantbaghel.art