https://framer.com/m/Imageparallax-c2VRbT.js
Io / Enhancements / ImageParallax
ImageParallax
ImageParallax offsets an image against the scroll position, so the picture drifts inside its frame as the section crosses the viewport.
Examples
Live specimens for every control the component exposes.
Default
One image, one parallax amount. The offset is a share of the container height, applied as the container passes through the viewport.
Parallax amount
verticalParallaxAmount is a percentage of container height. Negative values run the drift the other way.
Parallax Y 10%
Parallax Y 60%
Parallax Y −40% (reversed)
Horizontal drift
horizontalParallaxAmount shifts the image sideways from the container’s distance to the viewport centre. Set both axes for a diagonal drift.
Parallax X 25%
Parallax X −25%
both axes
Radius
borderRadius clips the frame the image moves inside. border and boxShadow add an outline and elevation from the same panel.
radius 16
radius 100
radius 8
Props
The controls exposed on the instance panel.
Usage
Guidance carried over from the component definition.
Reach for ImageParallax
A hero, banner or section image should gain depth as the page scrolls.
Two neighbouring images should drift at different rates to separate them.
The image needs its own frame — radius, border or shadow — around the motion.
The effect must stay tied to scroll position rather than run on a timer.
Reach for something else
The whole section should move, not just the picture — use a scroll effect on the frame.
You need a gallery or slideshow of several images — use CMSGallerySlider.
The image is static decoration with no scroll response — use a plain image fill.
Io — Enhancements
Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.