Before / After

Framer Component

NATIVE FRAMER COMPONENT — NO CODE

Drag the line. See the change.

Drag the line. See the change.

Drag the line. See the change.

A before / after comparison slider built with nothing but native Framer — frames, variants and variables. Hover or tap across the image and the reveal sweeps with you.

A before / after comparison slider built with nothing but native Framer — frames, variants and variables. Hover or tap across the image and the reveal sweeps with you.

A before / after comparison slider built with nothing but native Framer — frames, variants and variables. Hover or tap across the image and the reveal sweeps with you.

EXAMPLES

One component, every kind of proof.

One component, every kind of proof.

One component, every kind of proof.

Before

After

‹

›

Before

After

‹

›

Photo retouch — hover to reveal the edit

Before

After

‹

›

Website redesign — the same brand, rebuilt

HOW IT WORKS

01

Drop it on your page

Paste the component onto any page. It scales to the frame you give it — wide hero or small card.

02

Swap the two images

Before and After images, labels and every colour are variables in the properties panel. No code, ever.

03

Visitors do the rest

Hovering or tapping across the image steps through nine reveal positions with one smooth sweep.

Built with native Framer only — no code.

@buildinshadow

Create a free website with Framer, the website builder loved by startups, designers and agencies.