https://framer.com/m/Parallax-Carousel-1L2Nqv.js

Io / Enhancements / ScrollCarousel

ScrollCarousel

ScrollCarousel lays a row of picture cards across the page and moves them past each other at different rates as the reader scrolls.

Enhancements14 controlscard rowscroll parallax

Examples

Live specimens for every control the component exposes.

Props

The controls exposed on the instance panel.

PropTypeBehaviour
contentarrayThe cards: title, subtitle, image and link per entry.
cardWidthnumberWidth of every card.
cardHeightnumberHeight of every card.
borderRadiusnumberCorner radius of the cards.
cardPaddingpaddingPadding inside each card.
shadowshadowShadow under the cards.
scrollSensitivitynumberHow much page scroll it takes to move the row.
scrollFollowStrengthnumberHow closely the row tracks the scroll before easing takes over.
motionSmoothingnumberSmoothing applied to that movement. Higher is looser.
maximumSpeednumberCaps how fast the row can travel however hard the reader scrolls.
parallaxDepthnumberHow far the image inside a card lags behind the card itself.
imageZoomnumberScale applied to the image so the parallax has room to move.
videoPreloadMarginnumberHow far ahead of the viewport a card's video starts loading.
blurIntensitynumberBlur on cards away from the centre.
blurOverlayColorcolorTint laid over those blurred cards.
overlayStartOpacitynumberOpacity of that tint at the top of the card.
overlayEndOpacitynumberOpacity at the bottom, so the caption stays readable.
textPositionenumtop · center · bottom. Vertical placement of the caption on each card.
enableClicksbooleanTurns the cards into links.
openInNewTabbooleanOpens those links in a new tab.
smoothScrollbooleanEases the page's own scrolling while the row is on screen.
titleFontfontTypeface for the card title.
titleColorcolorColour of the title.
subtitleFontfontTypeface for the subtitle.
subtitleColorcolorColour of the subtitle.
PropTypeBehaviour
contentarrayThe cards: title, subtitle, image and link per entry.
cardWidthnumberWidth of every card.
cardHeightnumberHeight of every card.
borderRadiusnumberCorner radius of the cards.
cardPaddingpaddingPadding inside each card.
shadowshadowShadow under the cards.
scrollSensitivitynumberHow much page scroll it takes to move the row.
scrollFollowStrengthnumberHow closely the row tracks the scroll before easing takes over.
motionSmoothingnumberSmoothing applied to that movement. Higher is looser.
maximumSpeednumberCaps how fast the row can travel however hard the reader scrolls.
parallaxDepthnumberHow far the image inside a card lags behind the card itself.
imageZoomnumberScale applied to the image so the parallax has room to move.
videoPreloadMarginnumberHow far ahead of the viewport a card's video starts loading.
blurIntensitynumberBlur on cards away from the centre.
blurOverlayColorcolorTint laid over those blurred cards.
overlayStartOpacitynumberOpacity of that tint at the top of the card.
overlayEndOpacitynumberOpacity at the bottom, so the caption stays readable.
textPositionenumtop · center · bottom. Vertical placement of the caption on each card.
enableClicksbooleanTurns the cards into links.
openInNewTabbooleanOpens those links in a new tab.
smoothScrollbooleanEases the page's own scrolling while the row is on screen.
titleFontfontTypeface for the card title.
titleColorcolorColour of the title.
subtitleFontfontTypeface for the subtitle.
subtitleColorcolorColour of the subtitle.

Usage

Guidance carried over from the component definition.

Reach for ScrollCarousel

A set of projects or products should move past the reader as they scroll.

The cards are fixed content rather than CMS items.

Each card needs a picture, two lines and a link.

Cards should keep their own titles and links rather than being pure images.

Reach for something else

Readers should drag or swipe — use Carousel.

The set comes from a collection.

You need one large image with thumbnails — use CMSGallerySlider.

Io — Enhancements

Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.

io

An experiment in what a design system becomes when AI can consume it.

© 2026 io

Contact me

Create a free website with Framer, the website builder loved by startups, designers and agencies.