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

About this component

Radius on Scroll lets you animate corner radius and padding of images or videos based on scroll position, with per-corner and per-side control. It supports smooth, progressive transitions triggered by viewport entry and exit, and integrates seamlessly with Framer’s native image and video inputs.

Perfect for creating immersive hero sections, soft reveals, and scroll-driven transitions that respond to scroll without complex code. Whether you’re shrinking fullscreen media into a rounded block, expanding thumbnails to fill the screen, or creating something entirely unexpected, this component gives you the flexibility to design beyond the grid, driven by scroll.

Controls

Type: Toggle between image and video
Image: Upload using Framer’s native responsive image input
Video Source: Choose between URL or uploaded file
Start/End Radius: Set individual or unified radius for each corner
Start/End Padding: Set individual or unified padding for each side
Trigger Points: Choose where animation starts and ends
Offset Y: Add vertical offset to fine-tune scroll trigger
Transform Distance: Control how much scroll distance the transition spans
Responsive Layout: Media perfectly fills the component without distortion or unwanted margins

Getting started

Copy and paste the component into your project.
Set the width and height to Fixed or Fill, depending on your layout.
Upload an image or video using the built-in panel.
Adjust other settings and let your creativity take over.

5a:[["$","$L5d",null,{"post":{"id":"01988721-9094-7e5a-a75e-e14b78ced0bb","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"2a7480e1-02fe-4438-a9dc-4f77815fe7bb","name":"Eric Zhang","slug":"ericzhang","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2a7480e1-02fe-4438-a9dc-4f77815fe7bb/302rixy2","badges":["expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"6uGrZW1ciOvieyrxGJuw","resolved":true,"title":"Radius on Scroll","body":"$5e","bodyJson":null,"introduction":"","slug":"radius-on-scroll","author":{"framerUserId":"2a7480e1-02fe-4438-a9dc-4f77815fe7bb","name":"Eric Zhang","slug":"ericzhang","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2a7480e1-02fe-4438-a9dc-4f77815fe7bb/302rixy2","badges":["expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/i8EZn5PyTZAcqhhayS62/radius-on-scroll-ERXXnYatKXEenp3EWn3joeSSJ8mgnM","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-08-02T07:31:12.895Z","updatedAt":"2025-08-06T11:57:26.347Z","publishedAt":"2025-08-08T00:43:00.628Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/RadiusOnScroll-z8Z2.js@qWwhyLW8hSoq6nxiihTS","previewUrl":"https://particular-site-336288.framer.app","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"qWwhyLW8hSoq6nxiihTS","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":70,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-08-08T00:43:00.628Z","updatedAt":"2025-08-08T00:43:00.628Z","reported":false}}],"$L5f"]

Suggested for you