Extensive Customization Options
The "CompareImage" component offers a wide range of styling options. Users can personalize the background color, adjust the corner radius of the container and images, and configure the padding. Additionally, label styles such as text color, font size, and background color.
Dynamic SVG Integration
This component includes support for embedding customizable SVG graphics that respond to mouse movements. This feature is particularly useful for adding dynamic visual elements to your comparisons.
Enhanced Image Comparison
The "CompareImage" component provides a powerful way to compare two images side-by-side interactively. Users can move the divider bar to adjust the visible portions of each image, allowing for a clear and detailed comparison.
Back
The "CompareImage" component offers an interactive and visual way to compare two different images using an adjustable divider bar. Users can move this divider bar to better see the differences between the two images. Additionally, the component allows the addition of a customizable SVG element that can follow the mouse movement along the X-axis, providing a dynamic and engaging visual experience. This can be used in various applications, such as graphic design, presentations, or visual comparisons in web projects.
Component remixed
0
times.
Property Controls
SVG
Images
Style UI
How do I use it?
You need to copy the component and then simply paste it in your Framer project. It will automatically import and appear in your left sidebar in the Assets tab under components. From there you can drag it into your canvas for a new instance.
Set up guide
Soon
