The SplitWipe Showcase is a premium, production-ready Framer component designed to display visual projects through a highly engaging, scroll-triggered reveal. As users scroll, the current slide smoothly splits open to reveal the next one, creating a seamless and cinematic browsing experience.
✨ Key Features:
Scroll-Driven Animations: Smooth, hardware-accelerated clip-path animations powered by Framer Motion.
Fully Responsive: Uses modern CSS Container Queries to automatically adapt from a 50/50 vertical split on Desktop to a horizontal stack on Tablet and Mobile.
Per-Project Customization: Total control over every individual slide. Upload custom center logos, and define unique banner background and text colors per project to match distinct brand identities.
Production-Ready & Bug-Free: Built with clean React code, unique ID generation to prevent SVG conflicts, and robust fallbacks for Framer's image handling.
🛠 How to Use:
Drag and drop the component onto your Desktop breakpoint.
Important: Set the component's Height to Viewport (100vh) and Width to Fill (1fr) or 100%.
In the properties panel, add your projects. For each item, you can define the left/right images, title, custom logo, and distinct color schemes.
Adjust the "Breakpoint Tablet/Mobile" property to control exactly when the layout switches to the stacked mobile view.
💡 Performance Tip: To keep the animation buttery smooth (60FPS) across all devices, it is recommended to keep the number of showcase items between 3 and 10 per instance.
Alexander Moreno
