Radius on Scroll

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

1. Copy and paste the component into your project.

2. Set the width and height to Fixed or Fill, depending on your layout.

3. Upload an image or video using the built-in panel.

4. Adjust other settings and let your creativity take over.