Pixel Grid Transition is a page transition component designed for Framer websites.
It creates a dynamic pixel grid animation where blocks fade in to cover the screen when navigating away from a page, then fade out to reveal the next page.
This type of grid wipe transition is commonly used on modern agency websites, design portfolios, and interactive landing pages to create a cinematic navigation experience.
The grid automatically adapts to the viewport size, calculating rows dynamically so the entire screen is always covered regardless of device dimensions.
Navigation events are detected automatically by intercepting internal page links, allowing the transition animation to run before the new page loads.
The component only activates in Preview and Live mode, keeping the Framer canvas clean during design.
It also respects reduced motion preferences and skips animations when users have motion reduction enabled.
Features
Creates a full-screen grid of animated blocks that appear when navigating between pages.
The blocks fade in randomly to cover the screen, then fade out to reveal the next page.
The grid automatically calculates rows based on screen height.
You control only the number of columns, while rows adjust automatically to fill the viewport.
More columns create a denser pixel effect.
Each block animates with a slightly different delay, creating a natural staggered transition.
Two timing controls allow you to customize the animation flow:
• Leave Spread• Enter Spread
This produces a dynamic pixel wipe effect instead of a uniform animation.
Blocks fade smoothly using an eased motion curve rather than instantly appearing.
This creates a soft cinematic transition between pages.
The component automatically detects internal navigation links and triggers the transition animation when users click them.
Supported links include:
• navigation menu links• buttons• text links• cards• image links
External links and anchor links are ignored.
If a user has reduced motion enabled in their system settings, the animation is automatically skipped to improve accessibility.
The component works across all screen sizes.
The grid dynamically recalculates its layout when the window is resized to maintain full-screen coverage.
Property Controls
Pixel Grid Transition includes several adjustable properties.
Controls the number of vertical grid columns.
More columns create smaller pixel blocks and a denser transition effect.
Sets the color of the grid blocks used during the transition.
This allows the animation to match your website's branding.
Controls the total time over which blocks randomly fade in to cover the screen.
Increasing this value creates a slower pixel build-up effect.
Controls the total time over which blocks fade out to reveal the new page.
Higher values produce a more dramatic reveal animation.
How to Use
Copy the component and paste it directly into your Framer project canvas.
Framer will automatically import it into your project.
Add the Pixel Grid Transition component to every page in your project.
Keep all property values identical across pages to ensure seamless transitions.
Place the component at the top of your layer stack so it appears above all other content.
Go to:
Page Settings → Transitions
Set the transition to None (Instant).
This ensures the component fully controls the page transition animation.
The transition triggers only when navigation uses the HTML <a> tag.
In Framer:
Select your link or button →Open the Accessibility panel →Set Tag = a
Without this setting the transition will not trigger.
If you want a link to skip the animation, add the attribute:
data-transition-prevent
This is useful for elements such as:
• external links• modals• UI actions
Ideal Use Cases
Pixel Grid Transition works well for:
• agency websites• creative portfolios• product landing pages• interactive brand websites• design showcase sites
It creates a memorable navigation experience while maintaining smooth performance.
Daniyal Habib
