078
AI ready

Folded Type Scroll

£5

A giant printed headline unfolds from a connected paper concertina as you scroll, with dimensional hinges and soft elastic tension.

ScrollTrigger intermediate
4 more details
text-animation3d-transformsscrubscroll-reveal
Folded Type Scroll - GSAP animation effect preview

This demo reads better at your own screen size than in the frame below:

Open the demo in a new tab
Open Folded Type Scroll demo in new tab

About this effect

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.

What's included

8 items
  • 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

Perfect for

5 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

How it works

1 section

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.

Plugins ScrollTrigger
Difficulty Intermediate
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this effect's demo, 9 September 2026. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Paid effect

Purchase to unlock the code.

Buying Folded Type Scroll opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects.

£5 Standard license, unlimited projects

Browse free effects

Documentation

Quick Start

1. Add to your HTML <head>:

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 <body>:

Code snippet omitted: it ships with the download.

3. Add before the closing </body> 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 SOME<wbr>THING 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.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.

Your cart

Your cart is empty

The Vault £99

Everything in the catalogue, plus everything we release next.

Or browse effects, templates or UI elements.