102
AI ready

Receipt Printer Scroll

£5

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.

ScrollTrigger advanced
5 more details
scrub3d-transformsvelocity-reactivescroll-storytellingtext-animation
Receipt Printer 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 Receipt Printer Scroll demo in new tab

About this effect

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.

Read the full effect overview

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.

What's included

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

Perfect for

5 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

How it works

1 section

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.

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

Lighthouse, as measured

Google Lighthouse on this effect's demo, 15 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 Receipt Printer 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.

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.

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

The Vault library, plus future additions to the library.

Or browse effects, templates or UI elements.