Grid Split Reveal

Quick Start

Every page of your site gets the same three things. Serve the site from a web server (http or https) for the page transition; opened straight from disk, the preloader still runs and links stay ordinary links.

1. In each page's <head>, before your stylesheet:

Code snippet omitted: it ships with the download.

has-js lets the cover paint before the page, so nothing flashes underneath. gs-seen is only used by data-gs-once.

2. The cover first in <body>, and one container around the part of each page that changes:

Code snippet omitted: it ships with the download.

3. Before the closing </body> tag:

Code snippet omitted: it ships with the download.

That is all. The preloader runs on every full page load, and links between your pages now close and open the cover.

Using It With Your Own Design

The lines come from your grid. data-gs-grid names any element laid out with display: grid. The script reads the column widths and gutter the browser has worked out at the current viewport and draws one line in the middle of each gutter, plus one half a gutter outside the first and last columns. So a twelve-column desktop grid gives twelve panels plus two narrow margin panels, and the same page on a phone, where your CSS drops to two columns, gives two. Without data-gs-grid (or if the element is not a grid), data-gs-cols splits the viewport into equal columns, dropping to data-gs-cols-mobile at 640px and below.

If you want the lines to be visible on the page afterwards, as in the demo, draw them in your own CSS at the same positions: the demo's .guides element is a copy of the grid with a 1px line half a gutter outside each column.

What the cover needs.

• The [data-gs] element must be a direct child of <body>, outside the page container, so it survives page changes. The script builds the panels inside it. Anything you put inside it yourself (a name, a mark) shows above the panels during the preloader only and leaves just before the split; position it with CSS (it is position: absolute).
• The first block of style.css (marked THE COVER) is the effect. Copy it as it is; everything after it is the demo site.
• The cover is position: fixed at z-index: var(--gs-z) (100). Raise it if a fixed header of yours should be covered too.

What the transition needs from your pages. Only the [data-gs-page] container is swapped; the title, meta description and <html lang> are updated from the fetched page and the rest of <head> is kept. So every page must share the same stylesheets and scripts. Scripts inside the container do not run after a soft navigation: start per-page code from the grid-split:enter event. Pages in other folders work, as relative URLs inside the container are rewritten.

What is only the demo's design. The Rennick copy and photographs, Mona Sans, the faint column guides, the header, the Replay button and the name on the cover are all replaceable. The demo loads on an ink cover with light rules (set on [data-gs] in the demo block of style.css) and uses a light cover for page changes through the --gs-route-* properties.

Colours and timings, set on :root or on [data-gs]:

Options

Data attributes on the [data-gs] cover:

Other hooks:

Accessibility

• The cover is aria-hidden and never takes focus. Content is in the HTML from the start, so crawlers and screen readers get the full page.
• After a page change, focus moves to the new page's h1 (or main), the document title updates and a polite live region announces it.
• Scrolling is held only while the cover is closed or opening, so the page cannot slide under it.
• Without JavaScript or GSAP the cover never appears and every link is an ordinary link. If the script fails to start, the cover clears itself after six seconds.

Reduced Motion Behavior

The preloader has no lines and no travel: the cover fades out in 0.3 seconds once the page is ready. Page changes swap instantly, with focus and announcement intact. Switching to reduced motion mid-sequence finishes it at once.

Interruptions

• A click on another link before the page swap retargets the transition to the new page; a click on the current page's own link cancels and the panels open on the page you were on.
• A click or Back after the swap queues: the latest destination wins and the opening runs three times faster to get to it.
• A double click is one navigation. Back before the swap goes to the previous page, as the browser would.
• A link clicked while the preloader is still showing takes the cover over: it closes from wherever it is and opens on the new page.
• If the fetch fails, times out or the page has no [data-gs-page], the browser loads the page normally and the cover stays closed until its preloader takes over.

Dependencies

• GSAP 3.12+ (core only, no plugins). The demo is pinned to 3.15.0.
• No build step and no framework. The page transition needs fetch, DOMParser and the History API, which every current browser has; without them, links stay ordinary.