Skip to content

component

SplitWipe

By Alexander Moreno

Details

Summary

The SplitWipe Showcase is a premium, production-ready Framer component designed to display visual projects through a highly engaging, scroll-triggered reveal.

Description

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.

Introduction

Dynamic split-scroll image showcase

Rank history

Daily rank per list, from the first snapshot — lower is better.

120014001600165028/148/228/309/79/15
  • All · #6464