.png)
The transition adds a clean, seamless flow between pages. It only runs when you click internal links on the same site, so external pages or anchor links aren’t affected. When triggered, soft pixel-like squares appear for a moment, blending one page into the next. As they fade away, the new view comes into focus, creating a calm, modern sense of movement that feels intentional and alive.
Add the external script before the </body> tag of your project. (Only add once per project)
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>Add the HTML element inside the layout or global footer to display the transition grid.
<div ou-pixel-grid></div>Add the JavaScript below the GSAP script to activate the pixel transition effect.
// setup grid
const cols = 10, rows = 6, total = cols * rows;
const grid = document.querySelector('[ou-pixel-grid]');
if (grid) {
for (let i = 0; i < total; i++) {
const el = document.createElement('div');
el.setAttribute('ou-pixel-item', '');
grid.appendChild(el);
}
}
// reveal page
window.addEventListener('load', () => {
gsap.to('[ou-pixel-item]', {
opacity: 0,
duration: 0.3,
stagger: { amount: 0.7, from: 'random' },
onComplete: () => gsap.set('[ou-pixel-grid]', { display: 'none' })
});
});
// transition on click
document.addEventListener('click', (e) => {
const link = e.target.closest('a');
if (!link) return;
const internal = link.hostname === location.hostname &&
!link.href.includes('#') &&
link.target !== '_blank';
if (!internal) return;
e.preventDefault();
const dest = link.href;
gsap.set('[ou-pixel-grid]', { display: 'grid' });
gsap.fromTo('[ou-pixel-item]',
{ opacity: 0 },
{
opacity: 1,
duration: 0.3,
stagger: { amount: 0.7, from: 'random' },
onComplete: () => location.href = dest
}
);
});
// handle back nav
window.onpageshow = e => e.persisted && location.reload();Add the CSS to the global stylesheet or custom CSS area to style the grid and animation.
[ou-pixel-grid] {
position: fixed;
inset: 0;
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(6, 1fr);
z-index: 9999;
pointer-events: none;
}
[ou-pixel-item] {
background: #A5DF4E;
opacity: 1;
}Some solutions only work on the live site. Always publish and test after each change, as results may not appear in the editor.
