# Folded Type Scroll > A giant printed headline unfolds from a connected paper concertina as you scroll, with dimensional hinges and soft elastic tension. Canonical: https://gsapvault.com/effects/folded-type-scroll Live demo: https://gsapvault.com/demos/folded-type-scroll/index.html | Property | Value | |----------|-------| | Type | effect | | Tier | paid | | Price | £5 | | Difficulty | intermediate | | Plugins | ScrollTrigger | | Techniques | text-animation, 3d-transforms, scrub, scroll-reveal | | Uses Lenis | No | ## Lighthouse, as measured Google Lighthouse on the demo, 9 September 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 A sculptural typography effect that opens a continuous printed headline along alternating paper folds. ScrollTrigger connects the concertina to the page scroll, letting visitors fan it into a full-size statement and fold it back again. Perspective, face shading and a little elastic tension make the transformation feel physical. ## Features - Connected paper folds with continuous lettering across every hinge - Reversible scroll opening from compressed sculpture to flat headline - Alternating face shading and perspective that reveal the paper's depth - Scroll-sensitive hinge tension with a soft settling response - Adjustable fold count, opening angle, scroll distance and tension - Responsive headline composition with native touch and keyboard scrolling - Readable static layout for reduced motion and unavailable JavaScript - Source, minified script, focused demo and integration documentation ## Use Cases - Campaign launch sections with a headline that physically opens into view - Creative studio about pages with a memorable oversized statement - Editorial feature introductions with dimensional display typography - Brand manifesto sections with reversible scroll storytelling - Event announcements with a compact concertina that reveals the message ## Vibe-Code Ready Setup This effect 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 ScrollTrigger tracks the section while a sticky stage keeps the headline in view. Connected CSS 3D paper faces carry a continuous copy of the typography, changing their hinge angles together so the sheet opens without broken seams. Alternating shading follows the fold direction, while faster scrolling adds a short, softly settling tension. The original semantic heading remains available to assistive technology and supplies the static fallback. ## Documentation How this effect 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. ### Quick Start **1. Add to your HTML ``:** _Code snippet omitted: it ships with the download._ The small boot guard avoids briefly painting a flat heading before the paper is ready. It restores the heading after 1.8 seconds if a dependency cannot load; reduced-motion visitors see the heading immediately. **2. Add the section to your ``:** _Code snippet omitted: it ships with the download._ **3. Add before the closing `` tag:** _Code snippet omitted: it ships with the download._ The section opens over 1.25 stage heights of native scrolling. Its final tenth holds the fully readable message. Each `[data-fold]` section is independent. ### Using It With Your Own Design Keep the four data hooks in the example: the outer scroll section, its sticky stage, the perspective view and the source heading. The script creates decorative paper faces from the source heading, copying its classes and inline content. Use plain text, spans, emphasis and line breaks inside the heading; put buttons, links and other controls outside it so they are never duplicated into the paper. The `.showcase-toolbar`, prompt, background palette and `.fold-copy` typography are the demo's styling. Replace them with your own section design. The paper face background is `--surface`; the final line uses `--accent`. Every generated print inherits the source heading's classes, so your own headline class can style both the original and the moving copies. Mona Sans and the violet ending are design choices, not script requirements. Preserve these layout rules when changing the CSS: - `[data-fold-stage]` needs a definite height and room for the full open sheet. Its sticky positioning starts only after successful initialization. Avoid an ancestor with `overflow: hidden` or `auto`, which can change the sticky scroll container. - `[data-fold-view]` supplies the width and perspective. Keep the heading in normal layout so its width and height can be measured after fonts finish loading. The demo uses a conservative 1800px perspective, reduced to 1000px on phones. - Keep `[data-fold-paper]` at the centre of that view with `transform-style: preserve-3d`. Do not apply `filter`, opacity below 1, or clipping to this element. The stage can clip its outer bounds; shading belongs on the individual paper faces. - Keep the generated face positioning, clipping and `transform-origin: 0 0` rules. The script owns each face's transform and calculates the next hinge from the previous face's lower edge. - The original heading becomes transparent only after the complete paper exists. It still supplies layout and accessible text. Retain the reduced-motion rules and the `has-fold-js` boot fallback. - The source heading should fit its width. The demo allows `SOMETHING` to wrap on phones and uses four larger lines there. Change the line breaks and font sizes together for your message. ### Options Set options on the outer `[data-fold]` section before initialization. | Attribute | Values | Default | Description | |---|---|---|---| | `data-fold` | marker | required | Identifies an independent folded type section | | `data-fold-stage` | marker | required child | The sticky viewport holding the sheet | | `data-fold-view` | marker | required child | Perspective and source heading width | | `data-fold-copy` | marker | required heading | The single semantic copy printed on every face | | `data-fold-panels` | integer, `4`–`16` | `8` | Number of connected horizontal paper faces | | `data-fold-angle` | degrees, `15`–`74` | `62` | Initial hinge angle; higher values compress the sheet more | | `data-fold-runway` | stage heights, `0.5`–`4` | `1.25` | Scroll distance spent opening the sheet | | `data-fold-tension` | `0`–`2` | `1` | Extra hinge response to faster scrolling; `0` disables it | | `data-fold-preview` | `0`–`1` | omitted | Freeze a representative progress without creating a scroll runway | Values outside the supported range are clamped. Invalid numbers use the defaults. Even face counts make a balanced concertina; odd counts also work and give one end a different depth. ### How It Works One ScrollTrigger reads the section's normalized scroll progress while a native sticky stage holds the composition. The script measures the semantic heading after `document.fonts.ready`, then creates clipped copies covering consecutive horizontal bands of the same printed sheet. Each face alternates its rotation around the X axis. Its ending position becomes the next face's starting position, keeping the paper physically connected even when the hinges carry slightly different angles. Progress reduces the angles to zero, removes the viewing tilt and clears the alternating shading. A GSAP ticker smooths scroll progress and integrates a damped tension response from scroll velocity. Only the generated faces receive transforms. The source heading, ordinary page scrolling and other ScrollTriggers stay independent. ### Accessibility - **Reduced motion:** no paper faces, ticker or ScrollTrigger are created. The complete semantic heading stays visible in a static stage, without extra scroll distance. - **No JavaScript or unavailable dependencies:** the source heading remains the content. The optional boot guard expires automatically if the effect cannot initialize. - **Keyboard:** native Arrow, Space, Page Up, Page Down, Home and End scrolling drive the same opening. The effect adds no custom keyboard handler or focus trap. - **Touch:** ordinary vertical swiping opens the sheet. No pointer permission, sensor API or gesture interception is required. - **Screen readers:** generated faces are `aria-hidden`; the original heading is announced once. Use a heading level appropriate to your page. ### Performance Notes The demo uses eight DOM faces, CSS transforms and small leaf shading layers. It uses no WebGL canvas, texture uploads, blur filters or per-frame layout measurements. Sizes are recalculated after a resize; the ticker stops writing when progress and tension have settled. If a scene is removed from the document, its ticker and scroll tracker stop. Use the context teardown to release the rest of its resources. ### Dependencies - GSAP 3.12+ and ScrollTrigger. The demo pins GSAP 3.15.0. - CSS 3D transforms and `position: sticky` in a modern browser. - Mona Sans is loaded from Google Fonts for the demo; your own font can replace it. The demo uses native scrolling and does not load Lenis or Three.js. ## 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 effect. The standard license costs £5 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 Folded Type Scroll](https://gsapvault.com/effects/folded-type-scroll) - [The Vault (£99 one-time, best value): everything in the catalogue, including future releases](https://gsapvault.com/effects) ## Judge the Code Quality First These related effects are free with complete source published, written to the same production standard (cleanup functions, reduced-motion support, framework-agnostic): - [Scroll Progress Indicator](https://gsapvault.com/effects/scroll-progress.md): A precise GSAP reading-progress indicator in four shapes: a top bar, an SVG ring, a side rail, and a numeric percentage. - [CSS Scroll Reveal](https://gsapvault.com/effects/css-scroll-reveal.md): Native CSS scroll-driven reveals for crisp fade, slide, and scale entrances with accessible static fallbacks and no animation JavaScript. - [Parallax Hero](https://gsapvault.com/effects/parallax-hero.md): A pinned hero that pulls its layers into depth from one scrubbed ScrollTrigger: a headline sandwiched inside the stack, ridges or photographs climbing over it, and a sun that sets behind the far layer. --- From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt