Before/After Image Comparison Slider for Framer

Showcase your creative transformations with this image interactive!

The Before/After Image Slider is a Framer code component that allows you to display a background and foreground image stacked on top of each other, with a slider to reveal and compare the "before" and "after" images to each other.

• Seamlessly showcase transformations and comparisons with a simple slide, perfect for highlighting visual changes in products, designs, or spaces.
• Elevate user engagement and storytelling by effortlessly revealing the evolution from one state to another.
• Easily integrate this interactive feature, powered by React, to captivate your audience and enrich your online experience.

Features

• Easily configure the background and foreground images.
• Customize the slider graphic to your liking.
• Specify the slider start position to determine how much of the background or foreground image you want to reveal.
• Responsive design that handles on-the-fly resize.

Learn More

• Framer.com - create websites with ease using this no-code website builder
• Working with Framer Code Components - break the boundaries of Framer's site editor by using code components to create unique features for your website.

Installation

• While editing your Framer site, create a new code component using the instructions at https://www.framer.com/developers/#code-components
• Using the React javascript code you received from your purchase, copy and paste the text into your code component.