The word on the elastic line
Hover, Text, Physics
NewFree
Back to the library
The balloon headline
A balloon shop's headline written in puffy foil letters, each one tied with a curling ribbon to a little weight on the floor. The physics is real: the pointer blows into the air and the letters lean, knock together, turn on their ribbons and float back up. A click ties a new balloon where you clicked, and the whole bunch makes room for it.
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 balloon headline</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fredoka@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<!-- the wall, the floor, the weights, the ribbons and the foil balloons: one canvas drawn by the script -->
<canvas class="sky" data-sky aria-hidden="true"></canvas>
<header class="brand" data-in>
<svg class="brand__mark" viewBox="0 0 28 40" aria-hidden="true">
<path d="M14 2c6.4 0 11 4.9 11 11.2 0 7.4-5.6 13.3-9.4 15.2h-3.2C8.6 26.5 3 20.6 3 13.2 3 6.9 7.6 2 14 2z" fill="currentColor"/>
<path d="M12.2 28.4h3.6l-1 2.4h-1.6z" fill="currentColor"/>
<path d="M14 30.8c-1.8 2.2 1.8 3.6 0 5.8s1.6 2.4 0.4 3.2" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
<path d="M9.4 9.2c1-2.2 2.8-3.4 4.8-3.6" fill="none" stroke="#fff" stroke-opacity="0.7" stroke-width="1.8" stroke-linecap="round"/>
</svg>
<span class="brand__name">Helium Hour</span>
</header>
<p class="hint" data-hint data-in>Blow on the letters with your pointer. Click the sky to tie on another balloon.</p>
<h1 class="sr-only" data-title>Big day</h1>
<footer class="copy">
<p class="copy__line" data-in>Foil letters, filled and tied, at your door by nine. Balloons for birthdays, launches and every big day in between.</p>
<button class="pill" type="button" data-add data-autoclic data-in><span class="pill__bg" aria-hidden="true"></span><span class="pill__text">Add a balloon</span></button>
</footer>
</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.
30 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 balloon headline” from Animorio and fit it into my siteWhat it does
The first page of Helium Hour, a made-up shop that delivers balloons ready filled. In front of peach striped wallpaper, on a pink floor, little parcels with bows drop one after the other, bouncing. Then the letters of BIG DAY fill in turn: each one starts small on its parcel, swells with an elastic bounce while its ribbon unreels, and the helium carries it up to its place in the line, where it settles swaying and turns a little on its ribbon. The letters are shiny foil: puffy at the edges, with the pale seam all round, the little valve underneath and two reflections that slide across the surface as the letter leans or turns; side-on it becomes a thin, darker sheet, and from the back it reads the wrong way round. As soon as the headline is up, a gust crosses the room from left to right with a few drawn strokes of air, and the letters bow one after the other like a wave and come back up. Moving the pointer blows: the air around it takes its speed, the nearby letters lean, the ribbons bend and flutter, and whatever knocks together bounces, squashes for a moment and starts to turn. A click on a letter gives it a poke. A click on the sky ties on a new balloon (a foil star, a disc or a glossy latex one) right where you clicked: its parcel drops onto the floor under that spot, the balloon fills and rises, and if a letter is in the way it moves to the nearest free lane, at the sides or under the words, pushing its neighbours, which then settle again. Past six added balloons the oldest is untied: its parcel vanishes and it floats away upwards with its ribbon dangling. The Add a balloon button does the same, at spots chosen in order.
How it works
The foil, drawn once
Every letter is written on an offscreen canvas with fillText and strokeText together, with a fat pen and round corners: the extra stroke is the puff. That silhouette gives five pictures: the lit foil (a top-to-bottom gradient, an inner shade low right and an inner light high left made with shadowBlur on the negative of the silhouette, the swell along the middle of the strokes, the seam as a ring just inside the edge), a bright copy for the reflections, a dark one for when the letter turns side-on, the blurred shadow on the wall and the place of the valve, found by reading the pixels: the lowest point of the silhouette near the middle.
A balloon is a little rod
Every balloon has two points: the one the helium pulls, straight above the valve, and the valve where the ribbon is tied. They are held at a fixed distance, and since the helium pulls the first up and the ribbon holds the second down, the balloon stands upright by itself. The ribbon is a chain of twelve points that can go slack but never stretch; on top of that every point is held within its own length of ribbon from the weight, so the ribbon never stretches out. Everything runs at 120 steps a second with position-based dynamics (Verlet with constraints), eight constraint passes per step.
The air and the blowing
The air is a field of velocities: a slow breeze made of two waves, the opening gust crossing the room and the pointer, which hands its speed to the air around it with a soft falloff and a little outward puff. Balloons and ribbons get no pushes: they are dragged towards the speed of the air, the balloon a little, the ribbon more. Wind passing harder on one side turns the foil on its ribbon, which has a torsion spring and brings it back face on.
Knocks and room for the new one
Every balloon collides as a capsule (a segment with a radius) drawn inside its silhouette, thinner when the foil is turned side-on. Two capsules that touch are pushed apart in proportion to their weight, then the bounce is added, a turn from the sliding and an elastic squash. A new balloon rises straight above its weight: if a letter is above it or level with it, the weight moves to the nearest free lane (at the sides, between words), otherwise the balloon stays just under the words.
Direction and reduced motion
The opening is a single GSAP timeline: parcels dropping with bounce.out, each letter swelling with elastic.out while its ribbon unreels, the gust. GSAP only animates numbers (fill, ribbon length, position and strength of the wind); the physics runs in GSAP's ticker. With reduced motion nothing moves: the headline fades in already in place, and a new balloon quietly works out the new balance, which fades in over the old one.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
TITLE | script.js | 'BIG DAY' | The words on the balloons (up to sixteen letters): on a phone every word can get a line of its own. |
BLOW | script.js | 1 | How hard the pointer blows on the balloons. |
LIFT | script.js | 1 | How hard the helium pulls: more pulls the ribbons tighter and makes them sway quicker. |
AIR | script.js | 1 | How thick the air is: 0.4 lets them sway for a long time, 2.5 calms them at once. |
SPIN | script.js | 1 | How readily a foil balloon turns round on its ribbon. |
BREEZE | script.js | 0.3 | The faint draught that keeps them always moving a little (0 = still air). |
BOUNCE | script.js | 0.45 | How springy a knock between two balloons is. |
MAX_EXTRA | script.js | 6 | How many balloons can be added before the oldest is untied and floats away. |
When to use it
For the first page of a balloon or party shop, a service that organises birthdays, weddings and launches, an online invitation, an event page or a seasonal promotion: a headline to play with that says party straight away.
On phones
The same physics with the sizes adapted: the words go one per line, bigger, and the weights of the two lines stand in two rows on the floor. You blow by dragging a finger across the letters; a tap on a letter pokes it, a tap on the sky ties on a new balloon.
With reduced motion
Nothing moves and there is no wind: the headline fades in already hanging in place. A new balloon fades in where it ends up, with the letters already settled; the oldest, past the limit, disappears in the same fade.
Pitfalls
- With the valve in the middle, the A and the M had their ribbon tied in mid-air between their legs: the valve goes at the lowest point of the silhouette nearest the middle, and the point the helium pulls goes straight above it, or the letter hangs crooked.
- A Verlet chain pulled by a balloon stretches like an elastic band, because each constraint pass moves the correction along a single link: every point of the ribbon is also held within its own length from the weight, so the ribbon keeps its size with few passes.
- While they rise from the parcels, neighbouring letters touch and the elastic swelling, which overshoots full size, kicks them sideways until they swap places: during the rise they do not collide, and they turn solid as soon as the ribbon has unreeled.
- A new balloon with its weight right under a letter got stuck beneath it, because a knock between two lined-up capsules only pushes vertically: the weight goes to the nearest free lane, or the balloon stays under the words.
- shadowBlur and shadowOffset do not follow the canvas scale: at double screen density they must be multiplied by hand, or the puff changes from one screen to the next.
- GSAP writes its own inline transform and wipes the CSS one: the button's bounce on click is done on the button with clearProps, and the swelling on hover lives on its background, another element.
Libraries
GSAP 3.15.0, Fredoka (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 19 KB; the libraries: GSAP 28 KB.
Testing
Tested on 13 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.
