Before After Slider
An image comparison slider for Framer sites. Visitors drag the handle to reveal one image over the other, which makes it ideal for retouching, redesigns, renovations and any before and after story.
Customizable Properties
Everything is set from the property panel, with no code editing.
- Before and After: the two images to compare
- Direction: horizontal or vertical
- Move On: drag the handle, or follow the mouse on hover
- Start: where the divider begins
- Handle: size, color, line thickness and arrows
- Labels: text, colors and size, or hide them
- Radius: corner radius
Details
Works with mouse, touch and keyboard. A horizontal slider still lets the page scroll up and down on phones. Images use Framer's responsive image control, so they load at the right size.
How To Use
Drop the component on your page, pick a Before and an After image in the property panel, and resize the component to match your images.
About The Code
This is a code component, but no coding is needed. To keep quality consistent and deliver updates, unlinking is not available, so the source code cannot be viewed or edited. When an Update button appears next to the component, apply it to get the latest version.
Need Help?
Email joviseo1106@gmail.com. Questions are usually answered within 3 business days.
More Resources
More components by Joviseo, including four free ones: https://joviseo.vercel.app
