5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rdgef59pv3cw.js","/creators-assets/_next/static/immutable/chunks/0zdv1ssrxkrvj.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/0gxswkth5mc6b.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/36invrtoq879v.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0j6nyijn0flqd.js","/creators-assets/_next/static/immutable/chunks/2b15v_9ruhnys.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3h1dt97hv5ik0.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/0w757zrv0hi6k.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/1h-r9oggqjick.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/2051y-i4b0nnm.js"],"PostDetailCard"] 5d:T843,

✨ Features

🖱️ Two interaction modes

Drag — visitors grab the handle and pull to compare
Hover — the divider follows the cursor for instant feedback (auto-falls-back to drag on touch devices)

↔️ Five reveal directions

Left → Right, Right → Left, Top → Bottom, Bottom → Top
Plus a radial reveal that opens from the center outward

🎨 Fully styled to your brand

Native Framer typography controls for all text (font family, weight, size, color, letter-spacing)
Custom colors for handle fill, handle border, and divider
Five built-in handle icons (arrows, dots, lines) plus the option to upload your own
Adjustable handle size, divider thickness, corner radius, and label placement

📱 Mobile-ready out of the box

Larger handle target on touch devices for easier tapping
Optional swipe hint that disappears after the first interaction
Separate text for horizontal vs. vertical reveals
Smart gesture detection prevents conflicts with page scrolling

⚡ Polished by default

Spring-based animation for natural-feeling movement
Backdrop-blurred labels that read clearly on any image
Sensible defaults that look great immediately — no setup required

Use cases

Designer portfolios · Photo retouching showcases · Web redesign comparisons · Interior design before/after · Skincare and beauty results · Real estate staging · Product configurators · Restoration projects · Map and satellite comparisons

🚀 Getting started

Drop the component onto your canvas, swap in your before and after images, and adjust the size to match your layout. Everything else is optional — the defaults are tuned to look professional from the first render.

59:[["$","$L5c",null,{"post":{"id":"019dd0ba-c1b4-7981-aff5-6edfc5d5e49b","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0b7a80bc-24c5-42d6-9b9e-17708393fd9d","name":"Niklas Geisler","slug":"niklas-geisler-b53vfb","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2142154/006d8313269d5d0a14b26acb35cfd774-fLnmjZ4hiOx9ojpIdcxiqwETs1m7zt","followed":false,"followsYou":false},"media":[],"resources":[{"id":"TwuewJ0WlZJyswEAvTgv","resolved":true,"title":"BeforeAfterImage","body":"$5d","bodyJson":null,"introduction":"An interactive before/after slider","slug":"beforeafterimage","author":{"framerUserId":"0b7a80bc-24c5-42d6-9b9e-17708393fd9d","name":"Niklas Geisler","slug":"niklas-geisler-b53vfb","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2142154/006d8313269d5d0a14b26acb35cfd774-fLnmjZ4hiOx9ojpIdcxiqwETs1m7zt","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/TwuewJ0WlZJyswEAvTgv/beforeafterimage-S8vMhDCBAhJTy5bt4OiRhGbkJohhPd","metadata":{"tint":"hsl(0 0% 57%)","aspectRatio":1.3333333333333333}}],"post":null,"createdAt":"2026-04-26T20:49:36.306Z","updatedAt":"2026-04-27T20:52:12.792Z","publishedAt":"2026-04-27T20:56:33.460Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://essential-grammar-028957.framer.app/","price":"3","paymentUrl":"https://buy.stripe.com/eVq28t0h9bUO1X5a2P8Zq02","workshop":false,"categories":[{"id":"3a855006-6097-4489-b33b-8024cb26633e","name":"Interactions","slug":"interactions"}],"lastSaveId":"NgFCZ6UiJkYTVfXoiBiP"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-27T20:56:33.460Z","updatedAt":"2026-04-27T20:56:33.460Z","reported":false}}],"$L5e"]

Suggested for you