MARKETPLACE
PLUGINS
COMPAREIT: BEFORE&AFTER (PRO)
CompareIt: Before&After (Pro) logo

CompareIt: Before&After (Pro)

Published December 2025
   β€’    Updated January 2026

Plugin details

Take your image comparisons to the next level with CompareIt Pro. Built for performance and precision, this plugin offers a premium experience for photography, architecture, medical aesthetics, or e-commerce.
πŸ”₯ Key Features:

πŸ–±οΈ Magnetic Hover Mode: Let users slide simply by moving their mouse. Includes a "Smart Snap" feature that automatically closes the slider to 0% or 100% when near the edges for a clean view.

🏷️ Smart Fade Labels: Labels float above the slider (high z-index) and never get cut off. They automatically fade out smoothly as the slider approaches them.

🎨 Total Customization: Upload your own Custom Handle (icon), change colors, fonts, and sizes to match your brand.

⌨️ Accessibility: Full keyboard support (Left/Right arrows) for precise control.

πŸ“± Mobile Optimized: Smooth touch interactions on phones and tablets.

✨ Instant Filters: Apply quick filters (Grayscale, Blur, Sepia) to the "Before" image directly within the plugin.


πŸ”₯ V2: THE INTERACTION UPDATE CompareIt is no longer just a visual tool; it now talks to your workflows!

✨ NEW FEATURES:

⚑ Workflow Events: Trigger actions when a user changes the slider value (e.g., unlock a button when they see the "After" image).

πŸ‘‹ "Wiggle" Action: A physics-based shake animation to grab the user's attention.

🎨 Pro Styling: Control Border Radius, Divider Width, and Drop Shadows.

πŸ–ΌοΈ Object Fit: Choose between Cover (fills box) or Contain (shows full image) - perfect for product photography.

πŸ”’ Locked Mode: Set the slider to read-only state.


Demo Test: https://demo-app-56978.bubbleapps.io/version-test/imageslider_pro/1764811505298x396085320893968960

Editor: https://bubble.io/page?id=demo-app-56978&tab=Design&name=imageslider_pro&ai_generated=true&type=page&elements=bTJTh1

$15

One time  β€’  Or  $5/mo

stars   β€’   0 ratings
0 installs  
This plugin does not collect or track your personal data.

Platform

Web

Contributor details

NoCoddo logo
NoCoddo
Joined 2025   β€’   61 Plugins
View contributor profile

Instructions

How to use CompareIt Pro:
1. Setup: Drag the element onto your page. Set the desired Width and Height (or use logical resizing settings).

2. Images:

  - Upload your Image Before (e.g., the original photo).

  - Upload your Image After (e.g., the edited result).

  - πŸ’‘ Pro Tip: For the best experience, ensure both images have the exact same dimensions/aspect ratio.

3. Behavior:

  - Enable Hover Mode for a modern, fluid interaction. The slider will "snap" open or closed if the user hovers near the edges.

  - Enable Keyboard Support for better accessibility.

4. Styling:

  - The Labels ("Before"/"After") are now floating elements. They will automatically fade out when the slider bar approaches them to ensure they are never obstructed.

  - You can upload a custom logo or icon in the Custom Handle field to match your branding!


V2 INSTRUCTIONS:

1. USING WORKFLOWS: The plugin now exposes the "User Changed Value" event. This triggers only when the user releases the handle after dragging. Use it to capture the Current Value state or trigger logic.

2. ATTENTION SEEKING (WIGGLE): Users often don't realize an image is a slider. Run the "Trigger Wiggle" action when the element becomes visible on screen. It gives a gentle shake to signal interactivity.

3. IMAGE SIZING:

Cover (Default): Crops images to fill the container perfectly.

Contain: Ensures the whole image is visible (good for products with white backgrounds).

4. STYLING: Use the new Divider Shadow checkbox to make the white line "pop" against bright images.

Types

This plugin can be found under the following types:
Element   β€’   Event   β€’   Action

Categories

This plugin can be found under the following categories:
Media   β€’   Image   β€’   Social Network   β€’   Visual Elements

Resources

Support contact
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble