# Receipt Printer Scroll

> Scroll to feed a receipt up out of a thermal printer line by line: the strip droops and curls towards you, flutters with scroll speed, then tears at the perforation and lands on the counter.

Canonical: https://gsapvault.com/effects/receipt-printer-scroll
Live demo: https://gsapvault.com/demos/receipt-printer-scroll/index.html

| Property | Value |
|----------|-------|
| Type | effect |
| Tier | paid |
| Price | £5 |
| Difficulty | advanced |
| Plugins | ScrollTrigger |
| Techniques | scrub, 3d-transforms, velocity-reactive, scroll-storytelling, text-animation |
| Uses Lenis | No |

## Lighthouse, as measured

Google Lighthouse on the demo, 15 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 compact graphite thermal printer feeds a receipt upwards as you scroll, header first. Each line leaves the print head in its own feed step and darkens as the thermal print develops, and struck-out words are crossed through in the accent as they clear the head. As the strip grows it leans towards you under its own weight and its free end curls over, running off the top of the stage.

Scroll speed drives the paper's flutter, a gentle sway and a rattle through the printer body, all settling when you stop. At the end the perforation tears from one side and the finished receipt falls and lands on the counter, whole and readable; scrolling back lifts it to rejoin the printer and feeds the paper back in. The demo prints a playful GSAP Vault deposit slip, and the receipt is ordinary HTML: replace the lines with your own and every one becomes a printed line.

## Features

- Paper that rises out of a real slot, header first, with line-by-line stepped feeding
- Thermal print that develops from pale to full ink just above the slot
- A strip that droops towards the viewer under its own weight, with a curling free end, built from shaded CSS 3D slices
- Struck-out words crossed through in the accent as their line clears the print head, reversible on scroll-back
- Scroll-speed flutter, side sway and printer rattle driven by springs that settle when scrolling stops
- A scrubbed tear along the perforation, then a fall that lands the whole receipt on the counter, scaled to fit
- Clean reversal: the receipt lifts and rejoins, and the paper feeds back into the printer
- Receipt content in plain HTML, one printed line per child, including dotted leaders, rules and an SVG barcode
- Runway, droop, curl, sway and stepped-feed options plus a frozen preview mode for stills
- The complete receipt shown statically for reduced motion, missing JavaScript or a blocked CDN
- Independent instances, resize rebuilding and a revert() teardown

## Use Cases

- An order confirmation or checkout success page with a memorable printed summary
- A year-in-review or annual recap that prints its highlights as a receipt
- Product release notes or a changelog itemised line by line
- A pricing or plan page that itemises what is included, with a playful crossed-out total
- A campaign or event recap with stats and a closing line

## 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 printer in view. The receipt is cut into horizontal paper slices, each showing its band of a copy of your markup, and every frame the strip is laid out from the slot upwards, with each slice leaning towards the viewer through rotateX so the tall strip droops and its end curls, while a travelling wave adds flutter at speed. The feed pauses on each line before advancing, struck words are crossed through as their line clears the head, springs driven by feed and scroll velocity add sway and rattle that settle at rest, and a GSAP timeline lands the torn receipt on the counter. Your original receipt stays in the page for 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 `<head>`:**

_Code snippet omitted: it ships with the download._

**2. Add the printer where you want it in 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 script finds every `[data-receipt-printer]`, makes it tall enough for its scroll runway, keeps the stage sticky while you scroll through it, and builds the paper strip from your receipt markup once fonts have loaded.

### Using It With Your Own Design

**What the effect needs from your markup:** `[data-receipt-printer]` (the scroll section), `[data-rp-stage]` (the sticky, viewport-high stage), `[data-rp-window]` (the full-stage layer the paper is drawn in) and `[data-rp-receipt]` (your content). The printer is optional artwork: `[data-rp-rear]` sits behind the paper and `[data-rp-front]` in front of it (both rattle while feeding), `[data-rp-led]` blinks, `[data-rp-stub]` appears after the tear and `[data-rp-cue]` fades once printing starts.

**Editing the receipt:** the demo prints a playful GSAP Vault deposit slip; replace every line with your own. Write ordinary HTML inside `[data-rp-receipt]`. Each direct child is treated as one printed line, so the paper pauses on every child while the head prints it: paragraphs, rules, rows, an SVG barcode or an image all work. Wrap a word in `<s>` or `<del>` and it is crossed out in the accent as its line clears the print head (add visually hidden text such as `<span class="r-sr"> (crossed out)</span>` if the strike carries meaning, since screen readers rarely announce it). The `r-*` classes in the demo (`r-row`, `r-lead` for dotted leaders, `r-center`, `r-total`, `r-barcode`, `r-dim`, `r-brand`, `r-sr`) are plain styling; rename or replace them freely. Long receipts are fine: the strip runs off the top of the stage while printing, and the torn receipt is scaled to fit when it lands. Around one screen of lines paces best with the default runway.

**What is only the demo's styling:** the graphite printer drawing, the dark ground, the paper grain, the DM Mono and Doto faces and the red total. The printer can be any artwork, even an image, as long as the top edge of its front part sits on the slot line.

**CSS the effect depends on:**

- `.rp-stage` sets its `font-size` from the viewport, and every printer and paper size is in `em`, so one value scales the whole machine. The slot line is `var(--rp-foot) + var(--rp-front)` above the stage bottom: `.rp-paper`, the stub and the printer front all use those two variables, so change the printer's front height through `--rp-front`.
- `.is-rp-live` gives the section its runway height and makes the stage `position: sticky` with `overflow: clip`. The layering does the emerging: `.rp-printer__rear` (z-index 1) is behind `.rp-window` (2), `.rp-printer__front` (3) is in front and hides the paper below the slot; `.is-rp-torn` lifts the window to 4 so the torn receipt lands in front. Keep `perspective` on `.rp-window`.
- `.has-js .rp:not(.is-rp-live) .rp-receipt` hides the source receipt until the paper is built; the source then stays in place at `opacity: 0` for measurement and assistive technology.
- `.rp-slice`, `.rp-face`, `.rp-back` and `.rp-copy` style the generated paper. Keep `transform-style: preserve-3d` and `backface-visibility: hidden` on them.

### Options

Set on the `[data-receipt-printer]` element.

| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| `data-rp-runway` | `0.6` to `6` | `2.2` | Scroll distance in stage heights. The first 80% prints, the tear follows, and the last stretch holds the settled receipt. |
| `data-rp-droop` | `0` to `170` (degrees) | `100` | How far the tall strip leans towards the viewer under its own weight. `0` stands straight. |
| `data-rp-curl` | `0` to `420` (degrees) | `120` | Extra forward curl at the paper's free end. |
| `data-rp-sway` | `0` to `2` | `1` | Strength of the flutter, sway and feed rattle. Touch devices use about half. |
| `data-rp-step` | `true`, `false` | `true` | Feed line by line with a pause per line, or run the paper continuously. |
| `data-rp-preview` | `0` to `1` | none | Freezes the printer at that progress without scroll (stills, thumbnails). |
| `data-rp-preview-flutter` | `0` to `0.4` | `0` | Frozen flutter for a preview still. |
| `data-rp-preview-sway` | `-4` to `4` | `0` | Frozen sway angle for a preview still. |

### Accessibility

- **One copy of the content.** The generated paper is `aria-hidden`; your original receipt stays in the document at `opacity: 0` in its place, so screen readers read it once, in order.
- **Reduced motion:** with `prefers-reduced-motion: reduce` nothing is built. The complete receipt is shown flat, standing in the printer's slot, and the page scrolls normally. Changing the preference while the page is open builds or removes the paper.
- **No JavaScript or a failed CDN:** the same static, fully printed receipt is shown.
- **Keyboard and touch:** the effect is driven by ordinary page scrolling, so arrow keys, Page Down, Space and touch scrolling all print and tear it.
- The demo's text colours measure 5.3:1 (red total) and above on the paper.

### How It Works

ScrollTrigger reports progress through the section while a sticky stage keeps the printer in view. The receipt is cut into horizontal paper slices, finer at the free end, each showing its band of a copy of your receipt. Every frame the strip is laid out from the slot upwards: each slice sits on the end of the one below and leans towards the viewer with `rotateX`, so the tall strip droops and its end curls over, and a travelling wave adds flutter at speed. The feed pauses on each line and then advances, fresh print fades up just above the slot, struck words are crossed through as their line clears, and springs driven by feed and scroll speed add the sway, pendulum and rattle that settle once you stop. The tear pivots the receipt on one end of the perforation; once it separates, a short GSAP timeline tips it forward and lands it on the counter, scaled to fit the stage.

### Performance Notes

The paper is roughly 60 small composited slices; the ticker skips layout and style writes whenever the strip is at rest. Resizing rebuilds the slices after a short debounce.

### Dependencies

**Required:**
- GSAP 3.12+ (the demo pins 3.15.0)
- ScrollTrigger

**Fonts (demo styling only):** DM Mono 400/500 and Doto 800 from Google Fonts.

## 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 for our code. Bundled third-party assets retain their own licences and attribution requirements. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Receipt Printer Scroll](https://gsapvault.com/effects/receipt-printer-scroll)
- [The Vault (£99 one-time, best value): every collection in the Vault library, plus future items added to those collections](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