Marquee that speeds up with scroll
Scroll, Text, Hover
Free
Back to the library
The word in the barcode
A close row of thin lines, like a barcode: the pointer parts them like reeds, each on its own spring and with its own delay, and in the widening gaps a word printed behind them shows through. Resting, the opening grows and the word gains weight; leaving, the lines straighten with one last swing. In the minimal style.
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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The word in the barcode</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<!-- the code: a row of thin bars drawn on a canvas, with a word printed behind them -->
<canvas class="code" data-code role="img" aria-label="A barcode that parts under the pointer to show a word"></canvas>
<!-- the mark: three small bars that lean with the pointer, and the name -->
<header class="mark" data-label>
<svg class="mark__bars" viewBox="0 0 14 16" aria-hidden="true">
<g class="mark__lean" data-lean>
<rect x="1" y="0" width="1.4" height="16"/>
<rect x="5" y="0" width="2.6" height="16"/>
<rect x="10.4" y="0" width="1.4" height="16"/>
</g>
</svg>
<span class="mark__name" data-rise>Slat</span>
</header>
<!-- the hint: what to do, and what to do once the bars are parted -->
<p class="hint" data-label>
<span class="hint__roll">
<span class="hint__line">Run the pointer across the bars.</span>
<span class="hint__line">Hold still, and they part wider.</span>
</span>
</p>
<!-- the word behind the bars, for screen readers -->
<p class="sr" data-said></p>
</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.
17 values to change
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 word in the barcode” from Animorio and fit it into my siteWhat it does
A paper-coloured page with a barcode in the middle: about a hundred thin black lines, nearly all one pixel wide and a few thicker, with the spaces in three sizes as in real codes. In one corner sits the made-up brand Slat (three small bars by its name), in the other a line saying what to do. On opening the code prints from left to right: each line grows from the middle up and down, one after another; then a breath of wind runs through it once, and for a moment, between the bending lines, a sliver of red shows. Moving the pointer over it, the nearby lines part like reeds: they bow away from it, most at the height of the pointer and not at all at their two ends, which stay put. The spaces near the pointer grow three times wider, the lines at the edge of the opening crowd into two dark bundles, and inside the gaps a red word reads, large and wide, printed behind the code: it shows only in the part of each space that is wider than before, so at rest it stays fully hidden. Every line is a spring with its own pace and answers later the further it stands, so every move runs through the code like wind through a reed bed, and while moving the lines also lean the way the pointer is going. Resting the pointer, the opening slowly widens until the whole word shows, while the word gains weight; the line at the bottom rolls to a new sentence. When the pointer leaves, the lines straighten, the nearest first, go a hair past their place (and in the gaps of that last swing a flash of red still shows) and stop. Next time there is another word behind the code (Hush, Listen, Hello). The three bars of the brand lean in the wind too.
How it works
The code on a canvas
The script lays the lines from left to right with a seeded random generator, so the code is always the same: the space between two lines is PITCH times two thirds, one or four thirds, the thickness 1, 1.5 or 2.2 pixels. Each line is drawn as a polyline of 28 pieces, and all lines of one thickness go into a single path: three strokes in all on each frame.
Every line is a spring
For every line the script keeps two numbers: how far it bows and at what height it bows most. The first follows its target as a damped spring, worked out in steps of a hundred and twentieth of a second, with a slightly different pace for each line; BOUNCE lowers the damping. The second follows the height of the pointer without swinging. The shape of the line is a softened bell: zero at both ends, the most at the chosen height.
The opening
The target of each line is its distance from the pointer times a Gaussian: d times e to the minus d squared over two, with d measured in REACH. Near the pointer, lines move more the further they stand, so the spaces widen (PART says how much); further out they move less and crowd into bundles. Added to this are a lean the way the pointer is going, taken from its speed (WIND), and a soft limit that keeps the lines on the page.
The word only in the gaps
The word is drawn once on a hidden canvas, in the widest cut of the typeface that keeps it nearly as large as the best one. On each frame, for every pair of neighbouring lines and at every height, the script takes the resting space away from the space as it is now: what is left is a slit in the middle of the space. All the slits become one path, which works as a mask (clip) for the word. At rest the slit is zero and the word does not show.
The delay, the rest and the leaving
The script remembers where the pointer was over the last moments, and whether it was there: each line looks at the pointer as it was WAVE milliseconds per pixel of distance ago, so the far lines open and close later. When the pointer stays still, a number slowly grows from 0 to 1: it widens the opening and brings the weight of the word from WEIGHT minus 220 to WEIGHT, redrawing it in steps of ten. The entrance (the printing and the breath of wind) is a GSAP timeline.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
WORDS | script.js | ['HUSH', 'LISTEN', 'HELLO'] | The words printed behind the code: each time the pointer comes back, the next one. Short and in capitals work best, they read in strips. |
PITCH | script.js | 9 | The average space between two lines on a wide screen, in pixels. On the phone it gets smaller by itself. |
REACH | script.js | 0.12 | How wide the opening around the pointer is, as a share of the width of the code. Resting, it grows nearly twice as wide. |
PART | script.js | 2 | How far the lines part in the middle of the opening: with 2 the spaces grow three times wider. |
BOUNCE | script.js | 0.6 | How far the lines swing past their place before they settle (0 = not at all). |
WAVE | script.js | 0.9 | How late the far lines answer: milliseconds for every pixel of distance from the pointer (0 = all together). |
WIND | script.js | 0.4 | How much the lines lean the way the pointer is going, like reeds in the wind (0 = not at all). |
WEIGHT | script.js | 820 | The weight of the word when the opening is wide open, from 300 to 900: passing by, it starts 220 lighter. |
When to use it
At the top of a site that wants a quiet front page with a surprise: a studio, a shop, a label, an event that keeps its name hidden until someone looks for it. The barcode suits an online shop or a product page, and the hidden word can be a discount, a date or an invitation.
On phones
The same animation with the sizes adapted: the code is narrower and the lines closer, and the word picks by itself the cut of the typeface that makes it largest in the width. The finger is the pointer: dragging, the lines part and follow it, holding still the opening widens, lifting it the lines straighten.
With reduced motion
Nothing bows and nothing moves: the code is already printed and the lines stand still. When the pointer comes in (or a finger touches) the word fades in behind the lines, whole, and when it leaves it fades out the same way.
Pitfalls
- Showing the word in the whole space between two lines does not hide it: at rest it already showed in strips. The word sits only in a slit as wide as the space has grown (the space now minus the space at rest, with a 4 per cent margin), so at rest the slit is zero.
- With springs too different from each other (plus or minus 16 per cent), in fast passes neighbouring lines crossed and tied knots: at plus or minus 8 per cent they stay a swaying reed bed.
- On the phone the lines at the edge, pushed by the opening, left the screen: the shift goes through a hyperbolic tangent that brakes it gently as it nears the free room at the sides.
- The speed of the pointer comes from the difference between two frames: when the pointer comes back in at another spot the difference is huge and all lines bent at once. On entering, the speed starts again from zero.
- In a canvas font the weight can be any number, the width only a word (condensed, normal, expanded...): the weight changes smoothly, the width is picked among five cuts.
Libraries
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 8.1 KB; the libraries: GSAP 28 KB.
Testing
Tested on 15 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.
