62:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/0s1u33mr-mcgt.js","/creators-assets/_next/static/immutable/chunks/3n-84kg2cv-kk.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1tks4stn0rhd2.js","/creators-assets/_next/static/immutable/chunks/3wibvr2rv8b02.js","/creators-assets/_next/static/immutable/chunks/3i2xzlvy6l_e6.js","/creators-assets/_next/static/immutable/chunks/0ssu7t_j8jl1i.js","/creators-assets/_next/static/immutable/chunks/0h4bpdjiu20m1.js","/creators-assets/_next/static/immutable/chunks/3kdp38xspo624.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/2sy08qrc_3y80.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/43086d68m86ee.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/1gvonxkx57c1x.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/2shnfjbiykeds.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/3neo3kybqnjpc.js","/creators-assets/_next/static/immutable/chunks/3o5qsyzxffd89.js","/creators-assets/_next/static/immutable/chunks/0sdd6rzuigoor.js","/creators-assets/_next/static/immutable/chunks/1xzntyuuknw6z.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/2m-zjjbxmagmn.js","/creators-assets/_next/static/immutable/chunks/1pih5-tmb9v-o.js","/creators-assets/_next/static/immutable/chunks/2schrvc7zmj3_.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0qidl8fzyhhwz.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/31uxrh745m-yq.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/2lfji3877_8gq.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js"],"S"] 63:T778,

Show transformations the way they deserve to be seen. This interactive slider lets visitors drag to reveal your "before" and "after" side by side — far more engaging than two static images, and the most effective way to prove the value of retouching, redesign, or rebrand work to a potential client.

Why you need this component:

Static before/after images undersell your results. A slider turns a passive comparison into an interaction — visitors linger longer and walk away with a clearer sense of the difference you made. That's the kind of detail that makes a portfolio feel premium.

Features:

Drag anywhere — the whole component responds to drag, not just the handle, so it feels natural on both desktop and mobile.
Smart responsive handle — automatically shrinks on narrow containers (mobile cards, grids) so it never looks oversized.
Built-in labels — "Before"/"After" tags that fade out of the way as the slider crosses them.
Fully brandable — customize handle color, arrow color, border, size, corner radius, and label colors in the property panel. No code needed.
Reliable dragging — built on modern Pointer Events for consistent behavior across trackpads and touchscreens.
Zero-code setup — drop it on the canvas, assign two images, done. Looks polished out of the box.
Lightweight — no external dependencies, won't slow down your site.

Whether it's a design overhaul, a photo retouch, or a UI redesign, this component gives your work the presentation it deserves — polished, interactive, and built to convert browsers into clients.

61:["$","$L62",null,{"value":{"fallback":{"$inf$activity-creator-1222aa0f-3716-4d3a-83e3-0f77bdc66a54-all:/unified/creator/1222aa0f-3716-4d3a-83e3-0f77bdc66a54/activity/":[{"data":[{"id":"01a0c3f0-bd2f-73ef-97db-dbab57f6e811","type":"component.created","target":{"type":"component","id":"rw0DZVPhlGpjkpYt1N3X","preview":"Reveal Slide","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/1222aa0f-3716-4d3a-83e3-0f77bdc66a54/01a0c3e9-d966-7798-8f12-b333ac33a98e.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"1222aa0f-3716-4d3a-83e3-0f77bdc66a54","name":"Klex Design","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/1222aa0f-3716-4d3a-83e3-0f77bdc66a54/0cwvo2mk","slug":"aaron-klexdesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-21T12:28:49.327Z","latestAt":"2026-09-21T12:28:49.327Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:1222aa0f-3716-4d3a-83e3-0f77bdc66a54:/unified/posts/?creator=1222aa0f-3716-4d3a-83e3-0f77bdc66a54&with=reposts":[{"data":[{"id":"01a0c3f0-bb32-70dd-baee-81193557edd7","title":null,"body":"

Built this because I kept getting frustrated showing transformation work — retouching, rebrands, redesigns — as two static images side by side. Nobody actually feels the difference that way. So I made the interaction I wanted for my own site: drag to reveal.

What's in it: → The entire area is draggable, not just the handle — feels right on both desktop and touch → Handle auto-shrinks on narrow containers so it never looks oversized in a card or grid → Labels fade out gracefully as you cross them instead of overlapping → Fully customizable — handle color, border, size, corner radius, label styling — right from the property panel → Built on Pointer Events for reliable dragging across trackpads and touchscreens → Zero code — assign two images and you're done

Made for photographers, designers, and agencies who want their before/afters to actually land. Would love feedback if you try it out 🙌

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built this because I kept getting frustrated showing transformation work — retouching, rebrands, redesigns — as two static images side by side. Nobody actually feels the difference that way. So I made the interaction I wanted for my own site: drag to reveal."}]},{"type":"paragraph","content":[{"type":"text","text":"What's in it: → The entire area is draggable, not just the handle — feels right on both desktop and touch → Handle auto-shrinks on narrow containers so it never looks oversized in a card or grid → Labels fade out gracefully as you cross them instead of overlapping → Fully customizable — handle color, border, size, corner radius, label styling — right from the property panel → Built on Pointer Events for reliable dragging across trackpads and touchscreens → Zero code — assign two images and you're done"}]},{"type":"paragraph","content":[{"type":"text","text":"Made for photographers, designers, and agencies who want their before/afters to actually land. Would love feedback if you try it out "},{"type":"emoji","attrs":{"name":"raised_hands","emoji":"🙌"}}]}]},"author":{"framerUserId":"1222aa0f-3716-4d3a-83e3-0f77bdc66a54","name":"Klex Design","slug":"aaron-klexdesign","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/1222aa0f-3716-4d3a-83e3-0f77bdc66a54/0cwvo2mk","followed":false,"followsYou":false},"media":[],"resources":[{"id":"rw0DZVPhlGpjkpYt1N3X","resolved":true,"title":"Reveal Slide","body":"$63","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Show transformations the way they deserve to be seen. This interactive slider lets visitors drag to reveal your \"before\" and \"after\" side by side — far more engaging than two static images, and the most effective way to prove the value of retouching, redesign, or rebrand work to a potential client."}]},{"type":"paragraph","content":[{"type":"text","text":"Why you need this component:","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Static before/after images undersell your results. A slider turns a passive comparison into an interaction — visitors linger longer and walk away with a clearer sense of the difference you made. That's the kind of detail that makes a portfolio feel premium."}]},{"type":"paragraph","content":[{"type":"text","text":"Features:","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag anywhere","marks":[{"type":"bold"}]},{"type":"text","text":" — the whole component responds to drag, not just the handle, so it feels natural on both desktop and mobile."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smart responsive handle","marks":[{"type":"bold"}]},{"type":"text","text":" — automatically shrinks on narrow containers (mobile cards, grids) so it never looks oversized."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Built-in labels","marks":[{"type":"bold"}]},{"type":"text","text":" — \"Before\"/\"After\" tags that fade out of the way as the slider crosses them."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully brandable","marks":[{"type":"bold"}]},{"type":"text","text":" — customize handle color, arrow color, border, size, corner radius, and label colors in the property panel. No code needed."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reliable dragging","marks":[{"type":"bold"}]},{"type":"text","text":" — built on modern Pointer Events for consistent behavior across trackpads and touchscreens."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Zero-code setup","marks":[{"type":"bold"}]},{"type":"text","text":" — drop it on the canvas, assign two images, done. Looks polished out of the box."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Lightweight","marks":[{"type":"bold"}]},{"type":"text","text":" — no external dependencies, won't slow down your site."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Whether it's a design overhaul, a photo retouch, or a UI redesign, this component gives your work the presentation it deserves — polished, interactive, and built to convert browsers into clients."}]}]},"introduction":"show before and after of images","slug":"reveal-slide","author":{"framerUserId":"1222aa0f-3716-4d3a-83e3-0f77bdc66a54","name":"Klex Design","slug":"aaron-klexdesign","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/1222aa0f-3716-4d3a-83e3-0f77bdc66a54/0cwvo2mk","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/1222aa0f-3716-4d3a-83e3-0f77bdc66a54/01a0c3e9-d966-7798-8f12-b333ac33a98e.png","metadata":{"tint":{"h":69,"s":70,"l":16},"width":1600,"height":1067}}],"post":null,"createdAt":"2026-09-21T12:28:48.265Z","updatedAt":"2026-09-21T12:52:58.799Z","publishedAt":"2026-09-21T12:28:48.263Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/BeforeAfterSliderEN-P7ENiY.js@b53jEvFPfIpZcUOV8wgM","previewUrl":"https://beforeaftercomponent.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"b53jEvFPfIpZcUOV8wgM","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-21T12:28:48.818Z","updatedAt":"2026-09-21T12:28:48.818Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L64"}]