Before / After Slider

WordPress VIP Standard

Before / After Slider

The only comparison slider built for 100/100 Lighthouse performance. Powered by diagonal cuts, fluid LERP physics, and a hardware-accelerated Dual-Filter engine.

Download Free

View Docs

Live Demo

color

Grayscale

LERP Engine & Inertia

The slider doesn’t just move; it glides. We integrated Linear Interpolation (LERP) equations that generate 60FPS tactile inertia on drag & drop, plus magnetic snapping to key percentages.

Diagonal Masks & Shapes

Break out of boring vertical layouts. Let users reveal images through a mathematically adjustable diagonal cut (Slant Angle) or a fluid Opacity Fade transition.

Dual-Filter Processing

Apply independent hardware-accelerated CSS filters. Put a heavy Blur filter on the ‘Before’ layer and reveal a perfectly sharp ‘After’, or use dramatic Sepia to Color transitions.

Visual Evolution.

Start free for core features or upgrade to PRO for Awwwards-winning visual effects.

Slider Lite

Classic transitions (Vertical / Horizontal)
Standard handle cursor
Auto Aspect Ratio support
Solid boundary lines
~~Diagonal Cuts & Opacity Fades~~
~~CSS Filters (Blur, Sepia, Grayscale)~~
~~Inner Parallax & Hold-to-Peek~~
~~Pulse FX (Sonar, Glassmorphism)~~

Slider Pro

LERP physics, Glide & Magnetic Snap
Trigonometrically adjustable Diagonal Masks
Independent Dual-Filter Processing Engine
Neon Glow & Faded Gradient divider lines
Inner Parallax panning effects
Mobile “Hold-to-Peek” UX support
Magnetic Floating Cursor Badge replacement

Enterprise Standards

The technological architecture behind Before / After.

Absolutely not. The slider uses an advanced Garbage Collection engine. Event Listeners attached to window-level mouse or touch actions are injected via a scoped AbortController. Once you finish dragging, the allocated memory is automatically and instantly purged from the browser’s RAM.

If your images have irregular dimensions, they won’t break the page layout. Our “Aspect Ratio Locking” system crops excess pixels using native CSS object-fit, guaranteeing 100% stable layouts and protecting your Core Web Vitals score.

We use a strictly debounced ResizeObserver matrix. The complex trigonometry required for calculating the diagonal clip-path recalculates ONLY when the browser wrapper undergoes a physical mutation, protecting the CPU of lower-end devices from overheating.