Radius on Scroll
Create smooth, progressive media radius and padding transitions based on scroll. Perfect for immersive hero sections, soft reveals, and scroll-driven transitions without code.
Make it with Workshop
Build your own component with AI
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.
