# Poster Grid Template

> A one-page site for a poster biennale, built on a twelve-column rule grid that is printed on the page rather than hidden behind it: the grid draws itself in as measured rules while the headline sets column by column, four photographic plates reflow between fixed compositions with GSAP Flip, and a marginalia rail down the outer column tracks scroll on three channels at once.

Canonical: https://gsapvault.com/templates/poster-grid-template
Live demo: https://gsapvault.com/demos/poster-grid-template/index.html

| Property | Value |
|----------|-------|
| Type | template |
| Tier | paid |
| Price | £10 |
| Difficulty | intermediate |
| Plugins | ScrollTrigger, Flip |
| Techniques | grid-draw, scroll-reveal, scrub, parallax, flip-layout, text-animation, stagger, count-up, scroll-progress, click-toggle, duotone, progressive-enhancement, keyboard-navigation |
| Uses Lenis | Yes |

## Overview

A production-ready one-page site for a poster biennale, print studio, type foundry or design festival. It ships as a finished site for a fictional event, The Measure, the ninth Leeds Poster Biennale: an open call, a programme of press days and talks, four selected plates and a colophon, all written in the voice of a small organisation that runs a press six days a week.

The design idea is that the grid is visible. A twelve-column rule grid is drawn on the page as a design element and every headline, label and plate is set to it, at roughly ten times the scale contrast between the display line and the smallest dimension label. The palette is three colours and nothing else: warm paper, printing ink and one ink-red, used the way a two-colour press would use them.

Three interactions carry the page and none of them repeats another. The grid draws itself in as measured rules while the headline sets a word at a time; a field of four photographic plates reflows between four fixed compositions with GSAP Flip when you choose a plate; and a marginalia rail in the outer column reads scroll position on three separate channels.

Make it yours by repainting three hex values and their RGB triples in the token block, swapping the photographs in assets/img, and rewriting the copy. Every section is found by a data attribute and separately guarded, so you can delete the programme band, the plate field or the type specimen and the rest keeps running.

## Features

- A visible twelve-column rule grid that draws itself in from the margins on load, with the dimension labels ticking up to their printed values like a spec drawing filling in
- A display headline that sets itself column by column, each word snapping in from its own column rather than fading
- One full-bleed duotone plate that breaks three columns and runs off the edge of the sheet, with a solid ink caption strip
- A plate field where four photographs reflow between four fixed twelve-column compositions with GSAP Flip, the field's horizontal rules travelling to match on the same curve
- A marginalia rail down the outer column reading scroll on three channels: the section numeral, a measured rule with a millimetre readout, and Cardo side-notes that swap with a short overshoot
- An inverted full-bleed programme band setting the schedule as type rather than as cards
- A type specimen section built on a single oversized letterform that overruns the left margin
- Three colours and two Google faces, with every translucent value mixed from an RGB triple so a reskin is a six-value edit
- Measured contrast throughout, including a documented ban on the red carrying reading-size text
- A complete no-JavaScript document, a designed reduced-motion state, and keyboard parity on every plate control

## Use Cases

- Design biennales, poster festivals and open calls that need a submission deadline front and centre
- Print studios, letterpress and risograph shops selling work by the sheet
- Type foundries and specimen sites where the grid and the scale ladder are the product
- Editorial, publication and zine launches that want print logic rather than page logic
- Galleries and exhibition programmes with a dated schedule and a plate list
- Any portfolio that wants a Swiss, rule-led identity instead of a card grid

## Questions about this template

### Why is the grid visible?

Because it is the design. A twelve-column rule grid is printed on the page rather than hidden behind it, drawing itself in from the margins on load while the dimension labels tick up to their printed values like a spec drawing filling in. It is print logic applied to a page, which is the point for a design audience.

### What does the plate reflow do?

Four photographs move between four fixed twelve-column compositions with GSAP Flip, and the field's horizontal rules travel to match on the same curve. It is composition as the interaction rather than a carousel, and every plate control has keyboard parity.

### How many photographs do I need?

Five or so: four for the reflowing plate field and one full-bleed duotone that breaks three columns and runs off the sheet. The type specimen section is built on a single oversized letterform, and the programme band sets the schedule as type, so neither needs images.

### Can I use it for something other than a poster festival?

Yes. Print studios and risograph shops selling work by the sheet, type foundries showing specimens, zine and publication launches, and gallery programmes with a dated schedule all fit. Any portfolio wanting a Swiss rule-led identity instead of a card grid works.

### How much of a reskin is it?

Six values. Three colours and two Google faces, with every translucent value mixed from an RGB triple. Contrast is measured throughout, including a documented ban on the red carrying reading-size text, so a repalette has a stated boundary rather than a guess.

### Can artists submit work through the entry form?

No. It takes a name, an email, a sheet size and a note about the plate, and confirms on the page, but there is no backend behind it. An open call also needs somewhere to put files, so point it at a form handler that accepts uploads, or at Submittable, which is what most biennales already run.

## Vibe-Code Ready Setup

This template includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.

[How AI-assisted setup works](https://gsapvault.com/vibe-coding)

## How It Works

### Structure

One script initialises each section inside a single gsap.context, with a gsap.matchMedia branch for motion preference and for the 1100px breakpoint where the rail changes axis. Every init takes its section's root element and returns early if the markup is absent, so deleting a section from index.html cannot break the rest. Event listeners are kept in a Map and removed by the cleanup function returned from the matchMedia callback.

### The grid draw-in

On load, one timeline runs four things off the same clock: the twelve column rules scale up from the top margin, staggered from the edges inwards; the dimension labels tick from zero to their printed values; each headline word is set visible in a single frame and slid in from one column's width away, so it snaps into place rather than fading; and the supporting copy fades under it. Scrolling the hero then adds a scrubbed channel, softening the rules and drifting the plate against the type.

### The plate reflow

Four fixed compositions live in CSS as grid-column and grid-row rules under a data-arrangement attribute on the field. Choosing a plate, or one of the composition numbers, records the state with Flip.getState, swaps the attribute and lets Flip.from animate every plate from where it was to where the new composition puts it. Flip's absolute phase would otherwise collapse the field's height mid-tween, so the taller of the two measured heights is held for the duration and cleared on complete; the field's horizontal rules are tweened between their old and new offsets on the same curve.

### The marginalia rail

A single document-length ScrollTrigger paints three channels from one progress value: the measured rule fills, the millimetre readout counts toward the sheet height, and the tick marks ink over one at a time as they are passed. A second set of triggers, one per section, swaps the section numeral and its Cardo side-note with a short overshoot so each change settles rather than snaps. The notes are read from data attributes on the sections themselves, so a deleted section takes its note with it.

### Without JavaScript, and with reduced motion

A synchronous script in the head adds a has-js class before first paint, which is what gates the animation start states; the main script removes it again if the GSAP CDN is blocked, so the page falls back to a plain, fully readable document with the grid already drawn. Under prefers-reduced-motion a CSS block restores every gated element and the matchMedia branch sets the page to its finished state: the rules drawn, the headline set, the plates in the first composition, and the rail still reporting position without any easing.

## Integration Preview

How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download.

### Quick Start

1. Upload the folder to any static host. `index.html` is the site.
2. Replace the copy in `index.html` with your own.
3. Drop your photographs into `assets/img/` using the same filenames.
4. Repaint the six values at the top of `assets/style.css` (see **Palette**).

The GSAP and Lenis CDN tags at the bottom of `index.html` are plain script
tags with no integrity attributes, so you can self-host the libraries by
changing the `src` values and nothing else.

```
index.html          the site
thumbnail.html      a static poster composition of the hero at its peak state
assets/style.css    all styles, tokens at the top
assets/script.js    all animation, one init function per section
assets/script.min.js
assets/img/         bleed.webp, plate-01…04.webp
```

### Accessibility

- **No JavaScript**: every word on the page is readable. The grid is drawn, the
  headline is set, and the plates sit in the first composition. A blocked GSAP
  CDN produces exactly the same result, because the script removes the
  `has-js` gate when GSAP is missing.
- **Reduced motion**: `prefers-reduced-motion: reduce` gives a designed static
  page through both a CSS block and a `gsap.matchMedia` branch. Nothing is
  invisible and nothing is only reachable through an animation. The rail still
  reports scroll position, without easing.
- **Keyboard**: the plates and the composition numbers are real buttons with
  `aria-pressed`, so the field reflows from the keyboard exactly as it does
  from the pointer. Focus styles are drawn in the accent, and there is a skip
  link to the content.
- **Touch**: nothing depends on hover. The plate captions, which slide up on
  hover, are legible in their resting position too.

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium template. The standard license costs £10 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Poster Grid Template](https://gsapvault.com/templates/poster-grid-template)
- [Effects & Templates Vault (£39 one-time, best value): every current and future effect and template](https://gsapvault.com/effects)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt