Parallax Image Slide

What is 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? We design and build custom Framer components. Get in touch at contact@teampixel.com.au .

Before-and-after image comparison