https://framer.com/m/Radiusonscrol-9T6vkh.js
Io / Enhancements / RadiusOnScroll
RadiusOnScroll
RadiusOnScroll ties a media block’s corner radius and padding to the scroll position, so a picture rounds off or opens out as the section travels through the viewport.
Examples
Live specimens for every control the component exposes.
Default
An image goes from square and flush at the start of the scroll window to rounded and inset at the end. Radius and padding animate together.
Radius
startRadius and endRadius are the two ends of the corner animation. Put the larger value first to round off on entry instead of on exit.
end radius 0
end radius 48
start 64 → end 0
Padding
startPadding and endPadding inset the media inside its own box, which reads as the picture pulling away from a full-bleed edge.
no padding
end padding 40
start padding 40
Scroll window
Start and End pick the viewport moments the animation runs between. transformDistance stretches or compresses that window.
enter-bottom → exit-center
enter-center → exit-top
transform distance 50%
Props
The controls exposed on the instance panel.
Usage
Guidance carried over from the component definition.
Reach for RadiusOnScroll
A hero image should open from a rounded card into full bleed as the reader scrolls.
The shape change must track scroll position, not fire once on entry.
The same treatment has to cover video as well as stills.
Radius and inset should move together as one gesture.
Reach for something else
You only need a fixed radius — set it on the frame instead.
The picture should drift rather than change shape — use ImageParallax.
The effect should replay on hover or tap — this is scroll-bound only.
Io — Enhancements
Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.