Scroll Split Cards

Purchase and remix the included Framer project Locate the layer named “Scroll Split Cards Section” in the Layers panel Copy the entire section layer Open your own Framer project…

Sometimes a website does something unexpected while you scroll and suddenly the whole site feels more premium. That's exactly the moment this component recreates. A single hero image fills the screen. Then as you scroll, it quietly fractures - splitting into three cards that drift apart. Scroll a little further and the cards flip in 3D, revealing titles, descriptions, and actions behind them. The effect feels cinematic, deliberate, and surprisingly simple to implement. I saw this interaction on the RedoMedia website and couldn't stop thinking about it. So I reverse-engineered the behavior and rebuilt it 100% natively in Framer - no GSAP, no external scripts, no embeds. Just drop in the section and your page instantly gets that same high-end scroll animation reveal cards experience. Instructions Getting started takes under two minutes. Purchase and remix the included Framer project Locate the layer named “Scroll Split Cards Section” in the Layers panel Copy the entire section layer Open your own Framer project and paste it under your Desktop frame Adjust property controls in the right panel to replace the image, title, description, icon, and link. Preview - the scroll interaction works instantly across breakpoints. No code required. How It Works The section runs through three scroll interaction phases, each revealing the next stage of the interaction as the user scrolls. Phase 1 - Full Image At the start, a single large image fills the entire container, creating a strong visual anchor. This stage establishes the context before the interaction begins. Phase 2 - Split As the user scrolls further, the image performs the split image animation . It divides into three vertical cards that gradually move apart, forming three individual cards. Phase 3 - Flip After the cards separate, each one performs a 3D card flip along the Y-axis. The front image rotates away to reveal the information side of the card, including titles, descriptions, icons, and links. Property Controls Overview Full Image: Defines the hero image shared across all three cards before the split occurs. Three Split Image: Three cards' image after the split occurs. Card 1 / Card 2 / Card 3 Content: Each card has independent content controls including title, description, icon image, and CTA link. Features Fully Native in Framer; Built using Framer’s scroll effect - no GSAP, no embeds, no external libraries. Three-Phase Scroll Storytelling: A cinematic sequence: full image → split image animation → 3D flip reveal. 3D Card Flip: Each panel flips along the Y-axis, revealing content on the back. Responsive Layout: Works smoothly across desktop, tablet, and mobile. Cards stack vertically on smaller screens. Per-Card Customization: Each card can contain different titles, descriptions, icons, colors, and links. Zero-Code Setup: Paste one section and customize visually on the canvas. 60fps Performance: Uses GPU-accelerated transforms for smooth animation. Inspired by Awwward-Winning Design: Interaction concept inspired by the RedoMedia website. Use Cases Agency Service Pages: Split a single visual into three services or capabilities. SaaS Feature Sections: Reveal product features using scroll reveal cards . Portfolio Case Studies: Turn one project image into three outcomes or deliverables. Brand Storytelling Sections: Guide visitors through key brand Made with ❤️ by Soyeb © 2026 Soyeb. All rights reserved. Refund Policy: Due to the digital nature of these components, all sales are final, and once delivered they cannot be returned or refunded. Please review product details and demos before purchasing, and feel free to reach out if anything is unclear. Have questions or need a custom Framer component? Reach out at heysoyebali@gmail.com

Scroll in. Split apart. Flip to reveal.