Parallax Image Slide

Before-and-after image comparison by Aidan Looker

Show PreviewBuy for $12
Parallax Image Slide

About Parallax Image Slide

What is Parallax Image Slide?

Parallax Image Slide is a premium before-and-after image comparison component with built-in parallax depth, spring physics, and three orientation modes. Use it to showcase renovations, design transformations, retouching work, product upgrades, or any visual comparison. Supports drag and hover interactions, six handle designs, and a unique diagonal split mode.

Core Features

  • Three orientation modes — horizontal, vertical, and diagonal — with adjustable diagonal angle and an optional fit-to-bounds toggle

  • Built-in parallax effect that creates convincing depth as the divider moves across both images

  • Physics-based drag interaction with configurable friction, bounce, stiffness, and damping for a tactile, responsive feel

  • Six handle designs (Arrows, Grip, Diamond, Minimal, Line, None) and three divider styles (Sharp, Glow, None) for complete visual control

  • Edge tension effect that adds elastic resistance at the slider boundaries

  • Responsive image support with independent position controls for each image

Controls inside Framer

Essential

  • Before Image

  • After Image

  • Start Position

  • Orientation (Horizontal, Vertical, Diagonal)

  • Interaction (Drag, Hover)

  • Divider Style (Sharp, Glow, None)

  • Handle Design (Arrows, Grip, Diamond, Minimal, Line, None)

  • Diagonal Angle (visible for Diagonal orientation)

  • Fit to Bounds (visible for Diagonal orientation)

Physics (visible for Drag interaction)

  • Friction

  • Bounce

  • Stiffness

  • Damping

Colors

  • Handle

  • Handle Glow

  • Handle Border

  • Divider

  • Label BG

  • Label Text

Effects

  • Parallax toggle and depth

  • Edge Tension toggle and amount

Appearance

  • Border Radius

  • Handle Size

  • Divider Width

Overlays

  • Show Labels toggle

  • Before Text

  • After Text

  • Label Position (Top, Bottom)

  • Show Progress toggle

Fonts

  • Label Font

  • Hint Font

Hint

  • Show Hint toggle

  • Hint Text

Best use cases

  • Portfolio sites showcasing design, retouching, or illustration work side by side

  • Real estate and renovation pages comparing before-and-after property photos

  • Product landing pages highlighting feature upgrades or visual improvements

  • Case studies and agency decks demonstrating measurable transformation results

Ship interactive image comparisons in seconds — just drop, configure, and publish.

Questions or custom requests?