5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T876,

Here is a structured description for your Before After Slider component details. This is designed to be clear, professional, and helpful for potential users.

Overview

The Before After Slider is a high-utility Framer component built for photographers, UI/UX designers, and creative professionals. Whether you’re showcasing a photo retouch, a website redesign, or a product transformation, this tool provides a seamless, interactive way for visitors to visualize the impact of your work.

Key Customization Features

Take full control over the look and feel of your comparisons with built-in properties:

Flexible Interaction: Choose between a classic drag interaction or enable Snap to Cursor for a more fluid, hover-driven experience.
Custom Handle & Icon: Upload your own Handle Icon and adjust the Handle and Icon sizes to match your brand's aesthetic.
Tailored Labels: Use the Label Style dropdown to add "Before" and "After" text overlays or keep it minimalist.
Styling Controls: Set a custom Start Position for the slider and adjust the Corner Radius for a rounded or sharp-edged look.

Critical Setup Instruction

Important Note on Visibility: > When you first drag the component onto your canvas, it may appear invisible or collapsed. To fix this, simply go to the Size settings in the right sidebar and change the Width and Height from "Fit" to "Fixed." You can then manually resize the component to fit your layout perfectly.

Why use this?

Engagement: Encourages users to interact with your portfolio.
Clarity: Makes complex changes instantly understandable.
Performance: Lightweight and optimized for Framer sites.

5a:[["$","$L5d",null,{"post":{"id":"019dd2f0-9edb-7c5b-9a9c-e44372a8f461","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"63444aa6-69e4-4fd8-b4c3-2a09fee53861","name":"Sourav D","slug":"soule-design","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/572199/avatar-bWCfdhZ9ItANzLEIVuOYFFNehJLZW9.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"uMOpiukaKYNaEMzbRMyh","resolved":true,"title":"Impact Slider","body":"$5e","bodyJson":null,"introduction":"Easily show the impact of your skills","slug":"impact-slider","author":{"framerUserId":"63444aa6-69e4-4fd8-b4c3-2a09fee53861","name":"Sourav D","slug":"soule-design","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/572199/avatar-bWCfdhZ9ItANzLEIVuOYFFNehJLZW9.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/uMOpiukaKYNaEMzbRMyh/impact-slider-PDtUhYzVCgmzlADuDZFdKp6RFiRyO9","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-16T09:50:16.832Z","updatedAt":"2026-04-28T07:12:39.602Z","publishedAt":"2026-04-28T07:14:37.915Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/BeforeAfterSlider-BKyk2I.js@B5iQ3jGjeIE0C9XE2rkJ","previewUrl":"https://souravdileep.framer.website","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"B5iQ3jGjeIE0C9XE2rkJ","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":24,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-28T07:14:37.915Z","updatedAt":"2026-04-28T07:14:37.915Z","reported":false}}],"$L5f"]

Suggested for you