A scroll-driven card stack for Framer that brings each card to the front as you scroll. The active card stays centered while previous cards recede into the stack with subtle 3D depth, scaling, tilt, and shading. Customize the content, layout, scroll pacing, and motion directly from the properties panel.
Framer code component, ready to use in your project
Editable cards with titles, descriptions, images, and individual colors
Scroll-driven 3D stacking transitions
Adjustable scroll distance and spring motion
Optional smooth scrolling
Static canvas rendering for easier positioning
Content: add cards, edit titles and descriptions, assign images and individual card colors
Typography: customize title and body fonts, size, weight, line height, and letter spacing
Layout: card width and height, card radius, image radius, padding, header gap, and frame padding
3D Depth: visible stack depth, card scaling, tilt, vertical offset, depth, and darkening
Entrance Motion: incoming card distance, starting scale, and tilt
Scroll & Motion: scroll distance per card, top and bottom spacing, stage position, perspective, and spring settings
Appearance: page and frame backgrounds, card shadows, and shadow styling
Add Stacking Cards to your Framer canvas
Add your cards and customize their content and appearance
Adjust the scroll distance and 3D motion settings
Preview the page and scroll to watch each card move to the front while the previous cards recede into the stack
Built with React and Framer Motion
Cards remain pinned inside a framed stage while scrolling drives the transitions
The final card remains at the front once the sequence is complete
Smooth scrolling is optional and uses Lenis
The canvas and export use a separate static rendering path
Best suited for service showcases, project presentations, feature highlights, and editorial storytelling