# Fold-out Workshop > A printmaking workshop invitation whose paper folds reveal the project, day programme and practical preparation through independent physical hinges. Canonical: https://gsapvault.com/sections/fold-out-workshop-section Live demo: https://gsapvault.com/demos/fold-out-workshop-section/index.html | Property | Value | |----------|-------| | Type | section | | Tier | paid | | Price | Included only in the Vault | | Difficulty | intermediate | | Plugins | Core GSAP only | | Techniques | 3d-transforms, drag-interaction, state-transition, keyboard-navigation, progressive-enhancement, container-queries, responsive-section | | Uses Lenis | No | ## Lighthouse, as measured Google Lighthouse on the demo, 3 October 2026. A measurement of the demo as shipped, not a promise for your page. | Category | Score | |----------|-------| | Accessibility | 100 | | Best practices | 100 | No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live. ## Overview Fold-out Workshop is a complete invitation printed across independently unfolding paper leaves. Essential date, location and enquiry information remain on the front cover. Each crease promises a specific useful reveal: what participants will make, how the day runs, or what to bring. Actual printed content swings through a three-dimensional hinge into a broad, readable document. Copper Press is a fictional beginner linocut workshop. A generated workshop photograph shows tools, ink and tangible prints; the other leaves contain an original timed programme and practical preparation guidance. Copy, image and links are ordinary editable HTML, with full flat reading when motion is unavailable. ## Features - Three independent physical paper reveals with specific content promises - Native per-leaf buttons and direct mouse/touch crease dragging - Always-visible event date, venue and example enquiry action - A substantial generated printmaking photograph with local responsive sources - An original day programme and practical preparation content - Interruption-safe reversals and measured variable-height paper geometry - Complete flat fallback for reduced motion, no JavaScript or missing GSAP - Container-aware layout, independent instances and owned teardown ## Use Cases - Craft workshop and studio day invitations - Bookbinding or pottery class programmes - Museum practical activity sections - Creative retreat project and preparation details ## Vibe-Code Ready Setup This website section 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 Visitors first see the workshop invitation and essential event information. Each paper crease names the useful material it opens: the printed project, programme or preparation. A click, keyboard activation or direct drag swings that leaf from beneath its cover into a flat readable sheet. Leaves remain independent, so the visitor can keep the information they need open. Reduced-motion and unenhanced visitors receive the complete printed invitation in normal document flow. ## Documentation How this website section works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download. ### Files and setup Open `index.html` through a local HTTP server for the complete preview. No buyer build step is needed. `assets/style.css` and `assets/script.js` are the editable sources; `assets/script.min.js` is the compact version generated by the Vault pipeline. The shipping photograph is in `assets/img/`. This uses GSAP core 3.15.0, with no plugins or smooth-scroll library. For an existing page, copy the complete `
` and its contents, then load `assets/style.css`, GSAP and `assets/script.js`. The preview `
`, body canvas style and head/title are outside the extraction boundary. Do not copy `thumbnail.html`, which is only a catalogue capture composition. Bring the font links for Chivo and IBM Plex Mono, or replace them with your own fonts. Buyer files do not depend on Vault site assets. A minimal host loads the same dependencies after the extracted section: _Code snippet omitted: it ships with the download._ ### Make it yours Edit headings, paragraphs, date/time, venue, programme, lists and enquiry destinations directly in the semantic HTML. The first cover keeps essential event information visible even when every leaf is folded. The two `mailto:` links are example destinations: use your own email, booking page or working enquiry form. Update the fictional/sample disclosure to describe your real event accurately. Each `[data-release-item]` article contains one `[data-release-cover]`, its native `[data-release-toggle]` button, and one `[data-release-guide]` leaf. Add, remove or reorder whole articles; the script derives its items and measures their actual heights. A single article still has a useful fold. Keep the data hooks, and give the new leaf an authored ID. Runtime IDs are made unique for each mounted instance. Edit the closed promise text inside `[data-release-promise]` and the open action in `data-release-close`. Keep each promise specific to the content it reveals. Heading tags may change to match your page outline; the classes control their appearance. The colours, font roles, content width, outer gutter and paper padding sit together on `.copper-workshop` at the top of the CSS. `--release-ground`, `--release-paper`, `--release-ink`, `--release-muted` and `--release-accent` set the brand. Update `--release-ink-rgb` alongside the ink colour for paper rules/shadows. `--release-display`, `--release-body` and `--release-meta` set typography. `--release-width`, `--release-gutter`, `--release-space` and `--release-paper-gutter` set scale and spacing. `--release-item-gap` controls separation between complete items (24px by default). `--release-peek` controls the main closed paper edge height (16px by default). Container rules recompose the content below 800px and 450px; no full-width, fixed-height or pinned host is required. Replace the ordinary `` in the first leaf: update `src`, both `srcset` paths, `sizes`, intrinsic width/height and meaningful alt text. Replace the caption too. Set `--release-photo-ratio` and `--release-photo-position` on the root to change crop and focal point; their defaults are `3/2` and `50% 50%`. The image frame participates as part of the real paper, so a new subject or source aspect ratio needs no animation rewrite. Keep every source local and optimise it for the rendered size. ### Motion and accessibility `data-release-duration="1.15"` on the root controls a full fold's duration in seconds, clamped to 0.1–3. Buttons work with Enter/Space. The dots at each crease can be dragged down to open or up to fold; releasing settles at the nearest end. Only the grip prevents touch panning, so the page remains scrollable elsewhere. Quick repeated actions reverse from the current physical angle and settle the most recent choice. Several leaves can stay open together. Each button's `aria-expanded` controls its own concealed guide. Closed/moving leaves are inert and hidden from assistive navigation; covers and enquiry remain available. Opening exposes the substantive guide when the paper has settled flat. No JavaScript, missing GSAP and reduced motion show all leaves in ordinary readable document flow, with fold controls removed. Changing the motion preference while mounted restores the flat document. Paper measurements update after font/image loads and content/container changes. Two sections initialise independently. For client-side navigation, call `root.releaseNotes.revert()` before removing an instance. This removes only its own tweens, listeners and observers and restores readable authored content. Call `ReleaseNotes.mount(root)` to mount it again. Repeated mounts replace the old instance. The API also provides `getState()` and `setProgress(value, itemIndex)` for host-controlled preview states; without an index, `setProgress` applies to all leaves. These are optional integration tools, not required visitor controls. ### Photograph The local workshop image is generated concept photography, not a photograph of an actual Copper Press venue or event. It shows hands inking a botanical lino block, paper prints and a traditional press. The visible caption discloses its provenance. Replace it with your own workshop photograph when adapting the section for a real event. ## 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 website section is included only in the Vault, for existing and new owners. It is not sold individually. The standard licence covers unlimited personal and commercial projects; bundled assets retain their own licence requirements. - [Get the Vault](https://gsapvault.com/pricing) - [The Vault (£99 one-time, best value): every collection in the Vault library, plus future items added to those collections](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