Is this a drag-handle comparison slider?

No, and that is deliberate. The reveal is driven by pane navigation: when the diptych pane enters, the vivid AFTER half slides horizontally over the full-width BEFORE image with a hard edge, then the mono stamps stomp into place. It plays itself on autoplay, works identically in every export format, and never depends on a visitor discovering a drag handle. You get the classic before/after comparison as a composed animation instead of a widget.

I am not a renovation contractor - does the structure still work?

Yes. The skeleton fits any transformation business: landscaping, restoration, detailing, branding refreshes, even website redesigns. Revive Build Co., the kitchen, and the living room are placeholder fixtures - swap the image pairs for your own before/after shots, rewrite the location strips ("MAPLE ST. KITCHEN · 6 WEEKS") with your project names and timelines, and adjust the three outcome stats to whatever your clients actually measure. The desaturated-versus-vivid grading trick carries across any industry.

How closely do my before and after photos need to match?

Shoot from the same camera position where you can, but approximate matches work. The hard 50/50 split and the grade contrast - flat, desaturated BEFORE against warm, vivid AFTER - do most of the perceptual work, so the comparison reads even when details drift between shots. Keep the BEFORE half dim and cluttered and the AFTER half bright and styled, and the pane lands. The stamps and location strips anchor the two halves as the same project.

Before / After Template - Transformation Proof

A 5-pane before/after section for renovation, landscaping, restoration, and any other business whose whole pitch is the transformation. Near-black stage, construction-orange accent, Space Mono stamp labels, and hard-split diptychs where the vivid AFTER half slides in over the desaturated BEFORE. Built as a website section first: export it to HTML, React, Vue, or Svelte and drop it into an existing site as the proof-it-works band.

#What Makes This Template Stand Out

The slide-reveal is the signature. Each project pane opens on the full-width dated BEFORE shot, then the renovated AFTER half enters horizontally with a hard edge and parks at the 50/50 split - the classic before/after comparison, animated by pane navigation instead of a drag widget. The mono BEFORE and AFTER stamps stomp in after the reveal completes, and the direction flips between projects (the kitchen reveals from the right, the living room from the left) so the rhythm never repeats itself.

The grade is the palette. BEFORE halves are flat and desaturated - worn laminate, fluorescent light, peeling walls - while AFTER halves glow warm and vivid with sage cabinets, brass hardware, and golden-hour light. Because both halves show the same room geometry, the color treatment alone tells the story, and the bottom strips ("MAPLE ST. KITCHEN · 6 WEEKS", "HARBOR LOFT · 9 WEEKS") land the timeline as documentary fact.

The copy is contractor-blunt and the numbers move. The cover stacks "SAME ROOM. / NEW LIFE." in heavy Inter Tight while an orange line draws a strike straight through "SAME", and the meta line rolls "12 YEARS · 300+ TRANSFORMATIONS". Pane 4 drops the photography entirely for three enormous orange number-roll stats - 37 projects this year, +24% average home value, 0 missed deadlines - before the close returns to a full-bleed AFTER hero with "YOUR PLACE IS NEXT." over the scrim.

Hard-split BEFORE | AFTER diptychs where the vivid AFTER half slides in over the desaturated BEFORE
Construction-orange accent and Space Mono stamps on a near-black documentary stage
Orange draw strike-through across "SAME" as the cover headline lands
Reveal direction flips between projects to keep the rhythm fresh
Number-roll outcome stats: 37 projects, +24% average home value, 0 missed deadlines
5-pane 16:9 website section that exports to clean HTML, React, Vue, or Svelte

#Who Should Use This Template

Renovation contractors and design-build firms whose best sales asset is the last job. The kitchen and living room diptychs map one-to-one onto your project photos, and the "Get a quote" pill closes the loop on both the cover and the final pane.
Landscapers, restorers, and detailers selling any service where the after photo is the product. The stamped-mono documentary framing reads as evidence, not advertising.
Branding and web agencies showing redesigns. Swap the room pairs for old-site and new-site screenshots and the same hard-split reveal makes the upgrade undeniable.
Real estate flippers and stagers who need the value-delta story told fast. The +24% home value stat pane is already shaped for the argument.

#Best Use Cases

#Homepage Proof Section

Export to HTML, React, Vue, or Svelte and drop the band between your hero and your services section. The diptych reveals replay as visitors land on the section, the stats pane does the credibility work a testimonial wall usually carries, and the whole thing runs from the exported code with no slider library and no dependencies.

#Quote-Driving Landing Page

Run the template as a standalone published PaneFlow link for ad campaigns. The five-pane arc - blunt promise, two proofs, the numbers, the call - is a complete persuasion sequence, and both "Get a quote" pills can point at your booking form. The autoplay pacing means the page argues for you even when the visitor never clicks.

Export to video and the slide-reveals become a ready-made transformation reel for Instagram, TikTok, or a trade-show loop. The hard-edge wipe from dated to renovated is the format these feeds already reward, and the rolling stats pane gives the reel an ending stronger than a logo card.

#How to Customize This Template

Open PaneFlow and select "Before / After - Transformation Slider" from the template gallery
On the cover, replace the "REVIVE BUILD CO." wordmark, rewrite the "SAME ROOM. / NEW LIFE." headline if your trade needs a different promise, and update the "12 YEARS · 300+ TRANSFORMATIONS" meta line
Swap the kitchen pane's BEFORE and AFTER images with your own project pair, then edit the "MAPLE ST. KITCHEN" and "6 WEEKS" strip
Do the same on the living room pane - note the reveal enters from the opposite side - and update "HARBOR LOFT · 9 WEEKS"
Rewrite the three number-roll stats on pane 4 with your own project count, value delta, and zero-shaped claim
Replace the full-bleed hero on the closing pane, keep "YOUR PLACE IS NEXT." or write your own call, and point both "Get a quote" pills at your form
Export to HTML, React, Vue, or Svelte and drop the section into your site, or publish as a hosted link for campaigns

Stats Band - Number Roll Strip - the rolling-numbers proof band, distilled to a 3:1 strip
Testimonials Band - Pulled Quotes - the words-from-clients companion to this visual proof section
Agency Hero - Marquee Screamer - a loud dark hero to sit above this band
Portfolio Strip - Work Showcase - a calmer project showcase band in the same dark register

PaneFlow for Landing Pages - animated sections that export as real code
PaneFlow for Marketers - proof-driven sections for campaigns and funnels
PaneFlow for Webflow - embed exported PaneFlow sections in Webflow sites

Start with Before / After - Transformation Slider

Open this template in PaneFlow, customize it to match your brand, and export as HTML, React, Vue, or video.

Use This Template Browse All Templates

Before / After - Transformation Slider Template