Words that melt into each other
Text, Scroll, SVG
NewFree
Back to the library
The hot air balloon on scroll
Scroll inside the preview
The header of a made-up hot air balloon company, in the rich style: at dawn a big balloon of coloured gores waits on the meadow next to the inflation fan and the chase van, the burner roars and it lifts off; as you scroll it climbs and the valley falls away in layers, the meadow with the fence and the windsock, the wheat and lavender fields with rows of cypress and the shining river, the old town with its bell tower and castle, the hills in the mist. Flocks of birds and clouds pass in front and behind, the sky turns from pink dawn to blue day, and at the top the title and the button arrive.
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 hot air balloon on scroll</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/outfit@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a made-up hot air balloon company, Aerie. The stage sticks while you scroll: at dawn the balloon lifts off the
meadow and climbs, the fields, the old town, the river and the hills fall away in layers, flocks and clouds pass
by, the sky turns from pink to blue, and at the top the title arrives. Everything is SVG drawn by the script -->
<main>
<section class="volo" data-volo>
<div class="palco" data-palco>
<svg class="scena" data-scena aria-hidden="true"></svg>
<header class="testata">
<p class="marchio">
<svg viewBox="0 0 32 32" aria-hidden="true">
<path class="marchio__pallone" d="M16 2.5c-6.4 0-10.5 4.6-10.5 10 0 4.6 3.7 8 6.6 10.6h7.8c2.9-2.6 6.6-6 6.6-10.6 0-5.4-4.1-10-10.5-10Z"/>
<path class="marchio__spicchio" d="M16 2.5c-2.6 3-3.7 6.6-3.7 10 0 4.3 1.3 7.8 2.4 10.6h2.6c1.1-2.8 2.4-6.3 2.4-10.6 0-3.4-1.1-7-3.7-10Z"/>
<path class="marchio__cesta" d="M12.6 25.4h6.8l-.8 4.1h-5.2Z"/>
</svg>
<span data-brand>Aerie</span>
</p>
<p class="sotto">Hot air balloon flights</p>
</header>
<div class="quota" data-quota>
<p class="quota__fase" data-fase><span class="quota__nome" data-fase-nome>Burners on</span><span class="quota__nota" data-fase-nota>Cold air in, hot air up</span></p>
<p class="quota__altezza"><span class="quota__etichetta">Altitude</span> <span class="quota__numero" data-altezza>0</span> m</p>
</div>
<div class="finale" data-finale>
<p class="finale__sopra">Sunrise flights</p>
<h1 class="finale__titolo">Rise with <em>the sun.</em></h1>
<p class="finale__testo">An hour over the valley at first light, and breakfast wherever the wind sets us down.</p>
<a class="tasto" href="#" data-tasto><span>Book a flight</span></a>
</div>
<p class="cenno" data-cenno>
Scroll to lift off
<svg viewBox="0 0 24 32" aria-hidden="true"><path d="M12 3V27M4 19L12 28L20 19" /></svg>
</p>
</div>
</section>
<section class="dopo">
<p class="dopo__marchio">Aerie</p>
<h2 class="dopo__titolo">Three baskets, one valley.</h2>
<p class="dopo__testo">Flights leave at dawn from the meadow by the old mill, weather permitting. Wear a hat: the burner is warm.</p>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.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.
45 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 hot air balloon on scroll” from Animorio and fit it into my siteWhat it does
At dawn, under a pink sky with the sun low, a big balloon waits on Aerie’s flowering meadow: next to it the fan spins, the van waits and the windsock moves. The envelope is sixteen red, yellow, blue and cream gores, with seams, load tapes, folds near the mouth, the crown on top, light from the left and shade under the belly; it turns slowly on itself and the colours slide under the light. Below it, the striped skirt, the burner on its frame, the ropes and the woven wicker basket with its leather rim, two passengers and two sandbags. As you scroll the burner blows a flame at every stretch of the climb and the envelope glows from inside; the balloon leaves the meadow, its shadow spreads and fades, and the valley falls away beneath it in layers, each at its own speed: the meadow with the fence, the wheat, lavender and green fields with furrows, hedges and rows of cypress, the farms and the shining river, the old town with the bell tower and the castle with its flag, the hills with trees and the far ones in the mist. Flocks fly past flapping, clouds come down behind and in front of the balloon, the sky turns blue and the sun climbs. The basket swings a little under the envelope on a spring and the sandbags sway. Bottom left the altimeter counts the metres and the name of the stretch changes with a jump; at the top Rise with the sun. and the Book a flight button arrive. Scroll back up and the balloon comes back down to the meadow.
How it works
One number, how high you are
The scroll scrubs a plain object from 0 to 1. From it come the lift-off (the first metres off the meadow) and the altitude. The balloon stays in the middle and everything else comes down: each layer of the valley has its own speed, fastest for the meadow and slowest for the far hills, so they fall away in layers as if seen from above.
An envelope made of gores
The silhouette is a solid of revolution: a radius for each height, a sphere at the top and an upside-down drop down to the mouth. Each gore is the strip between two meridians, projected: x is the radius times the sine of the angle, y bends a little with the cosine, so the load tapes curve. Every frame the angle grows, the front gores are redrawn and the colours slide under a light that stays put.
The flame and the basket
When the altitude climbs a stretch, or after three seconds of stillness, a timeline takes the flame up and down: a drop-shaped path with a blue, white, yellow and orange gradient that flickers, and an orange glow inside the envelope’s mouth. The basket hangs from a pivot under the burner: it follows the envelope’s sway on a damped spring, and the ropes are recomputed from the corners of the turned basket.
Clouds, flocks and sky
The clouds are three layers of the same puffs, shade below, light above and a shifted highlight; they come down with the altitude and drift with the wind, and the big ones pass in front of the balloon. The birds are two curves going up and down. The sky is two gradient rectangles, dawn and day, and the day one fades in as the sun climbs.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
BRAND | script.js | 'Aerie' | The company’s name in the header and on the van. |
SCREENS | script.js | 6 | How long the flight lasts, in screens of scroll. |
CLIMB | script.js | 1 | How far the valley falls away: 0.5 a low hop, 1.5 a high flight. |
BURNER | script.js | 1 | How big the burner’s flame is on every blast (0 = no flame). |
SWAY | script.js | 1 | How much the balloon sways and the basket swings under it. |
SPIN | script.js | 1 | How fast the envelope turns on itself (0 = still). |
CLOUDS | script.js | 1 | How many clouds pass by, from 0 to 2. |
BIRDS | script.js | 1 | How many flocks of birds fly past, from 0 to 2. |
When to use it
For the header of a hot air balloon company, a travel or outdoor experiences agency, a farm stay or a hillside hotel offering a sunrise flight, a balloon festival; and for any page that tells a journey that climbs, from before to after.
On phones
The same animation with the sizes adapted: the drawing takes the shape of the box, always the same height and as wide as needed; on a narrow screen the balloon sits in the middle, a little smaller, and at the end it drops down to make room for the title, which goes on top in the centre. The words are measured on the height too; the header’s subtitle and the scroll hint go.
With reduced motion
No continuous flight, no flame, no sway, no moving clouds or birds and no smooth scroll: the flight is split into still moments (on the meadow, just off the ground, over the fields, over the town, among the clouds, at the top with the title). As you scroll, the scene fades and comes back already at the next moment.
Pitfalls
- The gores straddling the edge of the envelope must be cut at minus and plus 90 degrees: projected whole, their back half would come back over the front gores.
- Altitude, layers, clouds and sky must come from the scroll, not counted over time: that way scrolling back brings the balloon down to the meadow. Only the flame, the sway, the wind and the wings follow time.
- The drawing is rebuilt on resize, because it is as wide as the box: the town, the farms, the fence and the van are placed relative to where the balloon is.
- The clouds in front must be gone by the time the title arrives, or they cover it: they start higher than the others.
Libraries
GSAP 3.15.0, Lenis 1.3.26, Fraunces (font variabile) 5.3.0, Outfit (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 17 KB; the libraries: GSAP + ScrollTrigger 45 KB, Lenis 5.3 KB.
Testing
Tested on 22 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.
