Card Wipe Transition is a cinematic 3-card stacked page transition built entirely with Framer Motion — no GSAP, no Barba.js, no external libraries.
It creates a smooth, layered wipe animation between every page in your project. Cards slide in, cover the screen, then reveal the next page with a staggered motion for a premium, high-end feel.
Intercepts internal page links
Plays a 3-card staggered wipe
Navigates instantly
Automatically animates the entrance on the next page
Just paste the component on every page and set Page Transitions to None (Instant).
Vertical or Horizontal wipe
Individual color control for all 3 cards
Custom easing & duration
Adjustable stagger timing
Reduced motion support
Ignores same-page links
Skips mailto / tel / anchor links
Prevents double-click glitches
Includes a fallback safety timer
Works only on internal navigation
Canvas stays clean while designing
Add to every page
Keep settings identical across pages
Use proper <a> tag links (Accessibility → Tag in Framer)
Perfect for:
Portfolios
Agency websites
Product sites
Creative studios
Premium landing pages
If you want your Framer site to feel cinematic and intentional between pages — this is the transition layer you’ve been missing.
Daniyal Habib
