MARKETPLACE
PLUGINS
COMPAREIT: BEFORE&AFTER (FREE)
CompareIt: Before&After (Free) logo

CompareIt: Before&After (Free)

Published December 2025
   β€’    Updated December 2025

Plugin details

CompareIt is the easiest way to showcase transformations in your Bubble app. Perfect for portfolios, e-commerce, and case studies.
Unlike basic static sliders, CompareIt comes alive with built-in animations to grab your user's attention immediately.

πŸ”₯ Key Features:

πŸŒ— Interactive Comparison: Smoothly drag to reveal differences between two images.

πŸ€– Auto Scan Mode: Make the slider move automatically (left to right) to showcase details without user interaction.

🫣 Tease & Reveal: A sophisticated animation that "peeks" at the after image and then fully reveals it. Great for landing pages.

πŸ“± Mobile Optimized: Works perfectly with touch gestures on iOS and Android.

πŸ”§ Full Control: Set the starting position and control animations via workflows.

Perfect for:

  - Real Estate / Architects: Renovation results.

  - Dentists / Aesthetics: Treatment results.

  - Photo Editors: Filter vs Original.

  - Restoration: Old vs New.


Demo Test: https://demo-app-56978.bubbleapps.io/version-test/imageslider_free/1764787614411x553862020826294100

Editor: https://bubble.io/page?id=demo-app-56978&test_plugin=1764776703420x260773347539288060_current&tab=Design&name=imageslider_free&ai_generated=true&type=page&elements=bTJMd1

Free

For everyone

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

Other actions

Platform

Web

Contributor details

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

Instructions

How to use CompareIt:
1. Setup: Drag the ImageSlider element onto your page.

  - Tip: For best results, ensure both the "Before" and "After" images have the same aspect ratio (dimensions).

2. Configuration (Properties):

  - Before Image (Left): Upload the original state.

  - After Image (Right): Upload the result state.

  - Start Position: Define where the handle starts (0 to 100). Default is 50 (Center). Set to 0 to start fully closed (Left).

3. Using Animations (Workflows): You can control the slider programmatically using Element Actions:

  - Start Auto Scan: Makes the slider loop back and forth automatically. Great for grabbing attention in headers.

  - Tease and Reveal: A cinematic animation that moves the slider slightly to "peek" at the result, pauses, and then reveals the full image.

  - Stop Animation: Instantly stops any active animation and returns the handle to your defined "Start Position".

Types

This plugin can be found under the following types:
Element   β€’   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