Page Transitions

A Barba.js page transition that combines a stepped clip-path reveal with a shimmering pixel grid overlay. A dynamically generated column-and-pixel grid fades in and out column-by-column while the next page is revealed underneath via a steps() clip-path, creating a pixelated wipe effect. Adapts to portrait and landscape orientations automatically.

A Barba.js page transition that animates three stacked layers — the current page, a customisable middle card, and the next page — dropping them down one by one with scaling and clip-path border-radius, creating a satisfying stacked-card-drop effect. An optional navigation slide-in completes the sequence.

A Barba.js page transition powered by GSAP's DrawSVGPlugin. A single SVG path draws itself across the screen on leave, thickening as it goes until it covers the viewport. On enter it continues drawing forward then retreats, revealing the next page underneath. Swap the SVG path to create an entirely different transition shape.

A Barba.js page transition where both pages are visible simultaneously in 3D space. The current page is pushed back in z-depth and slides off to the left while the next page slides in from the right and moves forward. Rounded clip-path corners animate in during motion and snap back to sharp corners on landing. No transition overlay element required.

A Barba.js page transition where a solid panel wipes up to cover the screen, displays the name of the destination page, then continues upward to reveal the new page underneath. The page name is read from a data-page-name attribute on the Barba container. The current page shifts slightly upward as the panel covers it; the new page rises from below on reveal.

A Barba.js page transition where the next page slides up from the bottom and overlaps the current page, which recedes upward at a slower rate creating a parallax depth effect. A dark overlay fades in over the outgoing page as it recedes. Both leave and enter animations run simultaneously using a custom ease for a smooth, weighty feel.

A Barba.js page transition where multiple vertical columns stagger-slide downward to cover the screen, then continue downward to reveal the next page. The stagger direction reverses between leave and enter, creating a right-to-left wipe on leave and a left-to-right reveal on enter. Decorative vertical lines are included as a subtle grid overlay.

A minimal Barba.js crossfade transition. The current page fades out while the new page fades in simultaneously, creating a smooth blend. No overlay element or extra HTML required. Includes an optional h1 entrance animation on the incoming page.

A standalone GSAP pixel transition with no Barba.js or Lenis dependency. A CSS grid of square blocks covers the viewport on link click, fading in with a random stagger. Once fully visible, the browser navigates to the next URL. On page load the grid fades back out. Block count adapts to viewport size via adjustGrid(), which reads the column count from CSS.