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:Td63,

Introduction to our Before After Image Slider for Framer App

Key Features:

Horizontal or Vertical layout
Label Color and Background Change
Disable Overlay
Mouse Hover Options
Easy-to-use option panel
9 Preview Styles Slider
Watermark for Before and After Images
Custom Width & Height - Alignment
Auto Slider
On Scroll Slider
Uploaded Before and After Image Preview
For Before and After images Filters
Handle and Label Customization position, color, liquid glass effect

What You Can Do

Create and manage before/after slider items.
Preview slider behavior in the Framer canvas.
Update existing sliders without rebuilding them from scratch.
Keep slider content organized for easier iteration.

How To Use The Plugin

Open the Beaf plugin in Framer.
Add a new slider entry or select an existing one.
Configure the before and after content.
Insert or update the slider on the canvas.
Review the preview and make adjustments as needed.

Recommended Workflow

Start by preparing the images or content you want to compare.
Create the slider entry first, then place it on the canvas.
Check the preview after each major change.
Reuse existing slider entries when you only need small updates.

Tips

Use clear names for slider items so they are easy to find later.
Keep before and after assets aligned for the best comparison effect.
Refresh the canvas preview after making content changes.

If Something Looks Wrong

Confirm the slider entry was saved before inserting it again.
Check that the before and after content are both assigned.
If the preview does not update, reopen the plugin and verify the slider state.

How It Works:

How to Use Before After Image Slider for Framer | Easy Framer Image Comparison Slider Tutorial

5a:[["$","$L5d",null,{"post":{"id":"019e05e5-e101-7ac1-bf45-60f3918006e0","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"dd3380a5-5fea-401b-be33-8ad908368c7b","name":"Framefic","slug":"framefic","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2290784/avatar-D7VyRiPUPgg7M2fib6UPMu0jbZVdeS.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"1125","resolved":true,"title":"Before After Image Slider","body":"$5e","bodyJson":null,"introduction":"BEAF","slug":"beaf","author":{"framerUserId":"dd3380a5-5fea-401b-be33-8ad908368c7b","name":"Framefic","slug":"framefic","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2290784/avatar-D7VyRiPUPgg7M2fib6UPMu0jbZVdeS.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/1125-WavG4gm1wvmHwBArvyyaKGIBrhFe79","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/1125-BLyisy1nFmbfHL9tHEvHuBCTbXgvgM","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/1125-zJ3McNSRtVfcOtwjrrgeEIQSiL1vM4","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/1125-GOoqthWBa5PnPDq2XMifwRSaR18cKf","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-06T09:02:37.681Z","updatedAt":"2026-09-14T12:49:55.876Z","publishedAt":"2026-09-14T12:49:55.834Z","featuredAt":null,"approvedAt":null,"type":"plugin","attributes":{"framerPluginId":"1atwxslds8u3f1aeofjozq9d1","paid":true,"categories":[{"id":"676f63da-b192-4974-930d-73185802088a","name":"Media","slug":"media"}],"tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":28,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-08T04:43:31.969Z","updatedAt":"2026-05-08T04:43:31.969Z","reported":false}}],"$L5f"]

Suggested for you