Falling tools
Physics, Hover
NewFree
Back to the library
The spring down the stairs
A rainbow toy spring walks down the rows of a little page as if they were stairs: the top lifts and arches over, the coils stretch out and pile up on the step below, ringing at every landing. At the bottom it drops, bounces and settles; a toy crane picks it up and takes it back to the top. The pointer pushes it, a click calls the crane at once.
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>Spring down the stairs</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 whole page is the button: a click sends the crane to bring the spring back to the top -->
<button class="catch" type="button" aria-label="Send the crane to bring the spring back to the top" data-catch></button>
<!-- the rows of a little toy shop page: each row is a step of the stairs -->
<ol class="stairs" data-stairs>
<li class="step step--brand"><span class="step__name">Tumble & Twirl</span></li>
<li class="step"><span class="step__name">New in</span><span class="step__note">this week</span></li>
<li class="step"><span class="step__name">Spinning tops</span><span class="step__note">from $4</span></li>
<li class="step"><span class="step__name">Wind-up robots</span><span class="step__note">from $12</span></li>
<li class="step"><span class="step__name">Marbles by the jar</span><span class="step__note">from $6</span></li>
<li class="step"><span class="step__name">Rainbow springs</span><span class="step__note">back in stock</span></li>
<li class="step"><span class="step__name">Paper kites</span><span class="step__note">from $9</span></li>
<li class="step"><span class="step__name">Puzzles and board games</span><span class="step__note">from $15</span></li>
</ol>
<div class="floor" data-floor><span class="floor__text">Free gift wrap on every order</span></div>
<canvas class="spring" aria-hidden="true" data-canvas></canvas>
<p class="hint" data-hint>Click to send the crane. Push the spring with the pointer.</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.
39 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 spring down the stairs” from Animorio and fit it into my siteWhat it does
The page of a made-up toy shop, Tumble & Twirl: the rows (the shop's name, New in, Spinning tops, Wind-up robots and the others, with a few prices) are pastel strips one under the other, each a little wider than the one above, so their right edges make a staircase going down to the dark floor at the bottom ("Free gift wrap on every order"). The rows come in from the left with a little bounce. From above comes an orange toy crane holding a rainbow spring by its top coil: hanging, the spring is stretched, more at the top than at the bottom, like a real one. The crane sets it down on the first step, opens its claw and goes back up; the spring crouches for a moment and sets off. The top lifts, arches forward and lands on the step below; the coils pass over the arch and pile up in front while the stack behind gets shorter; then the tail lets go, flips over and the spring is standing again, one step lower, with its colours in reverse order. At every landing the coils ring and the step dips a little with a spring. From the last step the jump to the floor is longer: the spring lands, squashes, bounces twice stretching out and settles with a shiver. After a moment the crane comes back, picks it up by the top coil, lifts it (it stretches first, then leaves the ground), carries it to the top swinging like a pendulum and sets it down: it starts again. The pointer pushes the coils, which move aside and come back with a wave running along the spring. A click sends the crane at once: it waits for the spring to finish its step and takes it back to the top.
How it works
The page is the staircase
The rows are real elements of the page, placed by the script: the first is as wide as the shop's name (measured in its typeface), every row below is one step wider, and the step depends on the width of the screen and on the number of steps. The spring is a little narrower than the step, so it stands on the uncovered piece of row. A function tells how high a row is under a point: it keeps the coils from going through the steps.
Where the coils should be
A step goes from 0 to 1 and has three parts. In the flight the top leaves the stack and follows an arc down to the step below, turning its direction from up to down; in the pour the stack behind gets shorter and the one in front taller, with a fixed number of coils on the arch; in the flip the tail lets go, goes over and lands on top of the new stack. The arch is a cubic curve between the tops of the two stacks, sampled by length: every coil has a number (with decimals too) and falls in the stack behind, on the arch or in the stack in front. After every step the order turns round, as in a real spring.
Springs under the spring
Every coil chases its place on a lightly damped spring (STIFFNESS sets its strength) and also pulls its neighbours: the offset of one passes to the others and runs along the spring as a wave. So the top lags behind when it sets off, overshoots when it lands and the stack rings. At every landing the coils near that end get a push downwards, and the step dips a few pixels with elastic.out. The pointer pushes away the coils it touches, in the direction it is moving.
The iridescent ribbon
The spring is drawn on a canvas: every coil is an ellipse turned square to the axis, first all the back halves (darker), then the front ones, then a short highlight on the left. The colour goes from one tint to the next along the spring (five colours in :root) and, where a coil is tilted, it lightens towards a pearly sheen: on the arch the spring changes colour like a metal ribbon.
The floor and the crane
The direction is one GSAP timeline per round: the crane sets the spring down, the steps one after another, the bounce on the floor (squash and jump with tweens, then elastic.out), the pause, the crane coming back. Hanging, coil number r sits at r times the pitch plus the stretch times 1 − (1 − r/N)²: at the top the coils carry the weight of all the others and spread the most. While the spring touches the ground the stretch is limited by the step, so it stretches before it leaves. While the crane travels, the spring swings like a pendulum pushed by the crane's acceleration.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
COILS | script.js | 48 | How many coils the spring has: more coils make a denser ribbon and a fuller arch. |
STEPS | script.js | 6 | How many rows of the page it walks down (up to eight): the extra rows are hidden. |
STIFFNESS | script.js | 1 | How stiff the coils are: low is loose and wobbly, high is tight and quick. |
SPEED | script.js | 1 | The speed of everything: the steps, the bounce and the crane. 2 is twice as fast. |
PUSH | script.js | 1 | How hard the pointer pushes the coils (0 = it does not touch them). |
REST | script.js | 1 | How many seconds the spring rests on the floor before the crane comes. |
--coil-1 | style.css | #ff4f81 | The first colour of the spring's rainbow (the others are --coil-2 to --coil-5, the pearly sheen is --sheen). |
--crane | style.css | #ff6a3d | The colour of the crane's claw. |
When to use it
For the site of a toy shop or a children's brand, a 404 or "coming soon" page people stay to watch, a list of categories that becomes a game, a long loading screen: anywhere a page can become a little playground.
On phones
The same scene with the sizes adapted: the rows are taller and the steps narrower, so the spring is smaller and the steps steeper, and the last jump to the floor is shorter. A finger pushes the coils (the page does not scroll) and a tap sends the crane.
With reduced motion
Nothing moves: the rows and the spring fade in, with the spring standing still halfway through a step, arched between two steps. A click fades it out and back in on the next step. No crane, no ringing, and the pointer does not push it.
Pitfalls
- The coils are numbered from the bottom of the stack behind; at the end of a step the one that was at the bottom is on top of the new stack. Without turning the order round at every step, the colours jumped at once from one end to the other.
- With a truly physical spring (free masses and springs) the walk depends on everything: the number of coils, the height of the steps, the step. Here a curve decides the shape, and the physics sits on top, in the coils chasing it: the spring always walks down and still rings.
- The last coil of the stack, exactly on the step, has its place half a pitch above the row: the "do not go below the step" check skipped it when the stack was squashed by the bounce, and the pointer's push sent it into the row. The check applies to every coil whose place is above the row.
- The crane's claw, if it rises slowly, crosses the top of the spring setting off upwards: the crane goes up quickly and the first step starts a moment later.
- The pendulum pushed by the crane's whole acceleration turned the spring almost ninety degrees, off the screen: the acceleration counts less and the angle has a limit.
- Every row is moved by GSAP on the y axis for the dip at each landing, while left and top give its place: with transform for both, the dip wiped out the place.
Libraries
GSAP 3.15.0, Fredoka (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 11 KB; the libraries: GSAP 28 KB.
Testing
Tested on 10 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.
