Column Transition is a premium column wipe page transition designed specifically for Framer projects.
On click, vertical columns animate across the screen to cover the current page. After navigation, they stagger out to reveal the next page — creating a bold, modern wipe effect that feels intentional and high-end.
Unlike basic fade or slide transitions, this column wipe page transition gives your site a cinematic, structured motion system.
Built entirely with Framer Motion.No GSAP.No Barba.js.No routing hacks.
Intercepts internal <a> links
Sweeps columns in to cover the page
Navigates instantly
Staggers columns out on page load
Uses a portal overlay to stay above everything
The entire column wipe page transition is handled automatically.
Column Transition — Setup Guide
Click the Copy Component button.Paste it directly onto your Framer canvas.
Framer will automatically import the component into your Assets panel.
In the Layers panel, drag the component to the very top so it sits above all other layers.
Set its position to Absolute in the properties panel.
This ensures the column wipe page transition renders above your entire layout.
Place this component on every page in your project.
Keep all property values identical across pages — same column count, colors, durations, stagger values — to ensure a seamless column wipe page transition between pages.
Go to Page Settings → Transitions and set transitions to None (Instant).
The component fully controls the page transition animation.
The column wipe page transition only triggers on elements using the <a> HTML tag.
In Framer:
Select your link or button layer
Open the Accessibility section
Set Tag to a
Without this, clicks will not trigger the transition.
Column count (1–12)
Column color
Optional divider lines
Divider line color
Leave duration
Enter duration
Stagger timing
Stagger direction (Start, End, Center, Edges, Random)
Reduced motion support
You have full control over how your column wipe page transition looks and feels.
Choose how the columns animate:
Start — Left to right
End — Right to left
Center — Center first, edges last
Edges — Edges first, center last
Random — Organic, unpredictable timing
Perfect for matching your brand’s motion style.
Ignores same-page links
Skips mailto, tel, anchor & external links
Prevents double-click glitches
Includes fallback safety timer
Supports reduced motion preferences
Canvas stays clean while designing
Perfect for portfolios, agencies, creative studios, and premium landing pages.
If you want a bold, structured, cinematic column wipe page transition inside Framer — Column Transition delivers.
Daniyal Habib
