The screen-print gallery

Galleries, Transitions, Images, SVGGSAPAdvancedCompressed weight: Demo 24 KBGSAP 28 KBFreeDownload the zip

The prints of a small screen-print studio, each made of three transparent inks that make a third colour where they cross. Opening one, the sheet flies big into the middle of the gallery with its inks trailing a little and coming back into register as it lands; from one print to the next you go with the squeegee, which lays the new print’s first ink across the sheet, tips over, comes back with the second and goes again with the third, and the print builds up behind its blade.

The code

A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.

Download the zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The screen-print gallery</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/national-park@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/caveat@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the prints of a small screen-print studio. Every print is three inks on its own paper, drawn by the script as
         three separations; open, a print is big in the middle of the gallery, and the squeegee pulls the next one over
         it, an ink at a time -->
    <section class="prints" aria-label="Screen prints" data-gallery data-autoclic>
      <svg class="prints__sprite" aria-hidden="true" focusable="false" data-sprite></svg>
      <ul class="prints__grid" data-grid></ul>

      <div class="view" role="dialog" aria-modal="true" aria-labelledby="view-title" aria-describedby="view-alt" tabindex="-1" hidden data-view>
        <div class="press" data-press>
          <h2 class="press__title" id="view-title" data-title></h2>
        </div>
        <div class="squeegee" aria-hidden="true" data-squeegee></div>

        <button class="view__btn view__close" type="button" aria-label="Close the print" data-close>
          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6.5 6.5l11 11M17.5 6.5l-11 11"/></svg>
        </button>
        <button class="view__btn view__step view__step--back" type="button" data-prev>
          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M14.5 6 8.5 12l6 6"/></svg>
        </button>
        <button class="view__btn view__step view__step--on" type="button" data-next>
          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9.5 6l6 6-6 6"/></svg>
        </button>

        <p class="sr" id="view-alt" data-alt></p>
        <p class="sr" aria-live="polite" data-live></p>
      </div>
    </section>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Playground

Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.

15 values to change

Open the Playground

Or ask Claude Code for it

With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:

Take “The screen-print gallery” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On a white background a grid of six prints, each on a sheet with its margin and a soft shadow, with its name and price under it: Night Ferry, a ferry with lit windows in a harbour at night under the moon; Heron at Dawn, a heron on one leg among the reeds in front of the rising sun; Lemons, three lemons on a blue and white plate on a striped tablecloth; The Glasshouse, a domed glasshouse full of palms under a pink sky; Koi Pond, two koi circling each other between lily pads, seen from above; Last Light, a mountain hut with lit windows under the pink peaks of sunset. Every print is three flat inks laid one over the other, transparent like real ones: where the blue crosses the coral it turns mauve, where the green crosses the yellow it turns olive, and the shading is hatching or bands that thin out, as a screen printer does it. Under the pointer the sheet lifts and the three inks part slightly, like three sheets of film. Opening a print, the sheet flies from its place to the middle of the gallery and grows, and the three inks trail a little behind it, each by more, in proportion to its speed: you see them out of register and they come back into place as it lands; then its name is pencilled in the margin. A cross to close and two arrows appear. Going on (arrows, keys, a trackpad swipe or a finger) a wooden squeegee with a rubber blade is laid on the edge of the sheet and crosses it: behind the blade there is the new print’s paper with its first ink, wet and shining for a moment, while in front of the blade the bead of ink rolls along, getting thinner. At the far side the squeegee tips the other way, takes the second ink and comes back, then goes again with the third, and the print builds up before your eyes; the squeegee lifts off and the name is pencilled in. With a finger on the sheet the squeegee is in your hand: dragged to the left it pulls the next print, to the right the one before; let go past a third, or thrown, it carries on by itself, otherwise it goes back and lifts. Closing, the sheet flies back to its place in the grid.

How it works

Three screens a print

The script draws the prints as a screen printer would prepare them: for each one three SVG symbols, one per ink, on a 400 by 500 sheet. Each ink is a solid shape with parts taken out (a mask with the holes in black), and what comes later is printed on top; gradients are bands that thin out and shading is hatching (patterns). On the page the three inks lie one over the other with mix-blend-mode multiply over the paper, so where two cross they make a third colour, like real transparent inks; over everything a paper grain drawn once on a canvas.

The flight out of register

When it opens, the big sheet is already in its place and the script takes it back over the thumbnail with translate and scale; then GSAP brings it to the middle in OPEN seconds. At every frame the sheet’s speed is measured and each ink is moved back by speed times DRIFT times its share (0.6, 1.2 and 1.8), capped at 14 pixels: it runs out of register and comes back by itself as the sheet slows down. Closing, the same towards its place in the grid.

The squeegee

Over the big sheet there are three coats of the new print, each with the paper and the inks up to its own, cut by a clip-path inset whose edge is the blade: the first is laid one way, the second the other, the third the first way again, in PASS seconds each. Between passes the squeegee tips the other way (the handle goes over the blade) and the bead in front of the blade changes colour. The bead is a path redrawn every frame, moved by two sines that run with the blade and thinner as the ink is laid; behind the blade a white gradient in screen makes the shine of the wet ink (SHEEN).

The squeegee in your hand

A sideways drag on the sheet takes the squeegee: it follows the finger one to one and lays the first ink of the next print (to the left) or of the one before (to the right); past the last print it gives with some resistance and prints nothing. Let go past PULL of the width, or thrown at more than 450 pixels a second, the pass carries on at the finger’s speed and the other two follow; otherwise the squeegee goes back to the edge and lifts. Up and down the finger scrolls the page (touch-action pan-y).

Hurry, keys and the preview

Asking for another print while the squeegee works, the pass under way speeds up four times and the print asked for last comes right after; the ones in between are skipped. The big view is a dialog (role dialog, aria-modal) with the arrows, Home, End, Esc and Tab staying inside; the pencilled name is the dialog’s title, each print’s description is in aria-describedby and an aria-live says the new print’s name. Closed, the focus goes back to the thumbnail. A click from a script (the library’s preview) opens a print, pulls two more and closes it.

Values to change

Name	File	Default	What it changes
`PASS`	script.js	`0.28`	The seconds the squeegee takes to pull one ink across a print.
`OPEN`	script.js	`0.56`	The seconds a print takes to fly from the grid to the big view (it flies back a little faster).
`DRIFT`	script.js	`0.007`	How far the inks trail behind the paper while it flies, in seconds of its speed (0 keeps them in register).
`SHEEN`	script.js	`0.8`	How much the wet ink shines right behind the squeegee.
`PULL`	script.js	`0.3`	The share of the print a finger drags the squeegee across to pull the next one.

Try them in the Playground

When to use it

For the shop of an illustrator or a print studio, an art gallery’s catalogue, the plates of an illustrated book, a festival’s posters: anywhere the pictures are prints, or have the feel of paper and ink.

On phones

Two columns of prints. Open, the print takes the width of the screen less the room for the squeegee at its sides, with the cross above it and the arrows below; a finger drags the squeegee sideways and scrolls the page up and down. The lifting under the pointer is not there on a phone.

With reduced motion

No flight, no squeegee, no inks parting: the open print fades in at its place while the grid fades away, from one print to the next there is a crossfade, closing, the sheet fades away and the grid comes back. The buttons and the pencilled name fade in.

Pitfalls

Several shapes in one path, if they overlap going round opposite ways, leave a hole where they overlap (the nonzero rule): the hill in front of the sun came out the wrong colour. Each shape is a path of its own.
A light ink printed over a dark one darkens it further (multiply): the plate’s blue rings ran over the lemons making dark green lines. What lies on top is cut out of the screen of what lies under it, as in a real screen print.
If the bottom of the picture is the colour of the paper (snow, a path) the picture melts into the margin and seems not to end: those parts have an ink.
Every coat of the new print carries the paper too, not just the inks: so the squeegee really covers the old print and its pencilled name, which lies under the coats.
The pencilled name is the dialog’s title for screen readers: it is never emptied, it is hidden with a clip-path and written by widening it, otherwise the dialog opened without a name.
The buttons placed with transform took the pressed state’s transition with them and slid in from the corner the first time: they are placed with left and top.
A global function called screen covered window.screen: global names do not use the window’s properties.
A print asked for while the squeegee works does not cut the pass in half (it would jump): the one under way speeds up and the new one starts after it.

Libraries

GSAP 3.15.0, National Park (font variabile) 5.3.0, Caveat (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 24 KB; the libraries: GSAP 28 KB.

Testing

Tested on 7 October 2026

Desktop: Done
Phone: Done
Reduced motion: Done
Safari on iPhone: To do

License

Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.