The rocket on scroll

Scroll, SVGGSAPAdvancedCompressed weight: Demo 12 KBGSAP + ScrollTrigger 45 KBLenis 5.3 KBFreeDownload the zip

Scroll inside the preview

A space startup’s launch told by the scroll: a countdown in big letters, ignition with the smoke swelling, the tower letting go, liftoff with the scene shaking, the sky turning from blue to black, the stages falling away spinning and the satellite leaving the nose cone and opening its panels.

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 rocket on scroll</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/big-shoulders-display@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/martian-mono@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- a made-up space startup, Vesper Orbital. The stage sticks while you scroll: the countdown, the ignition with
       the smoke swelling on the pad, the tower letting go, the liftoff with the whole scene shaking, the sky going
       from blue to black, the stages falling away and spinning, the nose cone opening and the satellite unfolding
       its panels. Rocket, tower, smoke, clouds and satellite are SVG drawn by the script -->
  <main>
    <section class="lancio" data-lancio>
      <div class="palco" data-palco>
        <div class="cielo" aria-hidden="true">
          <div class="cielo__alto" data-cielo-alto></div>
          <div class="cielo__spazio" data-cielo-spazio></div>
        </div>
        <div class="scena" data-scena>
          <div class="scuoti" data-scuoti>
            <svg class="disegno" data-disegno aria-hidden="true"></svg>
          </div>
        </div>

        <div class="testi" data-testi>
          <header class="testata" data-entra>
            <p class="marchio">
              <svg viewBox="0 0 32 32" aria-hidden="true"><ellipse cx="16" cy="16" rx="13" ry="6" transform="rotate(-24 16 16)"/><path d="M16 6 21 22H11z"/></svg>
              Vesper Orbital
            </p>
            <p class="missione">Pathfinder-1 rideshare</p>
          </header>

          <div class="voci" data-voci data-entra>
            <div class="voce" data-voce="pad">
              <p class="voce__grande">On the pad</p>
              <p class="voce__nota">Twelve small satellites, one ride up</p>
            </div>
            <div class="voce" data-voce="ignition">
              <p class="voce__grande">Ignition</p>
              <p class="voce__nota">Nine engines at full thrust</p>
            </div>
            <div class="voce" data-voce="liftoff">
              <p class="voce__grande">Liftoff</p>
              <p class="voce__nota">Tower clear, climbing fast</p>
            </div>
            <div class="voce" data-voce="maxq">
              <p class="voce__grande">Max Q</p>
              <p class="voce__nota">Peak pressure, holding steady</p>
            </div>
            <div class="voce" data-voce="space">
              <p class="voce__grande">Black sky</p>
              <p class="voce__nota">Past the air, the stars come out</p>
            </div>
            <div class="voce" data-voce="sep">
              <p class="voce__grande">Stage sep</p>
              <p class="voce__nota">First stage away, second stage lit</p>
            </div>
            <div class="voce" data-voce="fairing">
              <p class="voce__grande">Fairing open</p>
              <p class="voce__nota">Nose cone off, payload in sight</p>
            </div>
            <div class="voce" data-voce="orbit">
              <p class="voce__grande">Hello, orbit</p>
              <p class="voce__nota">Pathfinder-1 deployed at 525 km</p>
            </div>
          </div>

          <dl class="strumenti" data-strumenti data-entra>
            <div><dt>Mission clock</dt><dd data-orologio>T-00:05</dd></div>
            <div><dt>Altitude</dt><dd data-quota>0.0 km</dd></div>
            <div><dt>Speed</dt><dd data-velocita>0 km/h</dd></div>
          </dl>

          <p class="cenno" data-cenno>
            Scroll to launch
            <svg viewBox="0 0 24 32" aria-hidden="true"><path d="M12 3V27M4 19L12 28L20 19" /></svg>
          </p>
        </div>
      </div>
    </section>

    <section class="arrivo">
      <p class="arrivo__marchio">Vesper Orbital</p>
      <h2 class="arrivo__titolo">Your satellite, in orbit by spring.</h2>
      <p class="arrivo__testo">Rideshare seats on the next Pathfinder flight. Bring the payload, we bring the rocket.</p>
      <a class="tasto" href="#"><span>Book a seat</span></a>
    </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.

49 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 rocket on scroll” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

The stage stays still for the whole way down: on the right (in the middle on a phone) the rocket of Vesper Orbital, a made-up space startup, on the pad next to the service tower, on the left the big words of the mission, at the bottom three instruments (mission clock, altitude, speed). When the page opens the words rise with a bounce and the tower’s arms reach out to the rocket with a spring. As you scroll the countdown starts: the numbers hop in letter by letter and leave upwards, meanwhile the rocket vents vapour from its sides and the scene starts to hum. At ignition the flame grows under the nozzle and flickers, and the smoke swells out of the pad in puffs that roll to the sides. The tower’s arms swing up one after another, the tower leans back with a spring, the clamps on the pad open and the rocket lifts off: the scene shakes hard, the plume grows longer, the camera follows, the ground, the hills, the smoke and the tower drop away, clouds rush past in front and behind. The sky goes from light blue to deep blue and then to black, the words turn light, the stars come out and the curve of the Earth rises from below. Then the first stage comes off with a puff, goes out and falls away spinning while the second one lights; the nose cone opens into two halves that drift off turning; the second stage goes out and falls too; the satellite comes closer to the camera, raises its antenna and opens its solar panels one at a time, with a little snap at the end. The instruments count the seconds, the kilometres and the speed. Scrolling back up, everything rewinds, smoke included.

How it works

A still stage and a single drawing

The section is many screens tall (SCREENS) and holds a sticky stage 100lvh tall. The sky is three CSS layers on top of each other (day, high altitude, space) switched on with opacity. Everything else is one SVG drawn by the script: stars, Earth, hills, clouds, the world (ground, pad, tower, smoke) and the rocket, with its parts in separate groups (plume, flames, second stage, first stage, satellite, the two halves of the nose cone). The viewBox follows the screen’s shape: 1000 tall on a computer with the rocket at 62% of the width, 1400 tall on a phone with the rocket in the middle and room for the words on top.

One timeline, tied to the scroll

The whole story is one GSAP timeline with times in free units: countdown, ignition, tower release, liftoff, sky, separation, fairing, deploy. ScrollTrigger ties it to the scroll through the section with scrub: 0.6 and Lenis makes the scroll smooth. The moments are built from four times (ignition, separation, fairing, deploy), so COUNTDOWN only stretches the start and everything else moves along by itself.

Liftoff: the camera instead of the rocket

The rocket climbs only a little (150 units with power2.inOut) and then stays almost still: it is the world that drops 3000 units with power2.in, faster and faster, while the hills drop at half the speed, so you feel the depth. The clouds are two layers that cross the screen from top to bottom, one in front of the rocket and one behind, at different speeds. The words and the instruments change colour with the sky.

The shake and the flames run on time

How hard the scene shakes is a number in the timeline (it rises at ignition, peaks at liftoff, dies out up high), but the actual shake comes from a GSAP ticker: sums of sines at different frequencies, multiplied by that number and by SHAKE, move and turn the drawing’s container a little. The same ticker makes the flames flicker with scaleY and scaleX on an inner group, while the timeline switches the outer group on and off: so the flicker goes on even when the scroll stops.

Stages, nose cone and panels

Each stage is a group that falls with y on power1.in and turns with a linear rotation (SPIN), pivoting on the centre of its box; flames and plume sit outside the group, so the pivot does not move. The halves of the nose cone open by turning on their lower outer corner with back.out and then fly off. The satellite’s panels are rectangles already in their final place: they start squashed (scaleX 0.1) against the body and stretch out one after another with x and scaleX on back.out, which gives the final snap.

Values to change

Name	File	Default	What it changes
`COUNTDOWN`	script.js	`5`	How many numbers the countdown shows before ignition, from 3 to 10. More numbers take more scroll at the start.
`SHAKE`	script.js	`1`	How hard the scene shakes at ignition and liftoff (0 = it stays still).
`SMOKE`	script.js	`1`	How much smoke swells out of the pad: 0.3 is a wisp, 2 a huge cloud that reaches the edges.
`SPIN`	script.js	`1`	How much the stages and the nose cone halves spin as they fall (1 = about two thirds of a turn, 0 = they fall straight).
`PANELS`	script.js	`3`	How many solar panels per wing the satellite opens, from 1 to 4.
`SCREENS`	script.js	`9`	How long the launch lasts, in screens of scroll: fewer screens and everything goes faster.
`STARS`	script.js	`160`	How many stars come out in space.
`COUNT_NOTE`	script.js	`All systems go`	The small line under the countdown numbers.

Try them in the Playground

When to use it

To tell a launch, a departure or a product that “takes off”: the site of a space startup or a satellite company, the launch page of a new app, a funding round that reaches its goal, the countdown to an event, a “how it works” page split into phases, a growth story that goes from the ground to space.

On phones

The same animation with the sizes adapted: the rocket sits in the middle and lower down, the big words and the instruments sit on top, the drawing is taller (a 1400-tall viewBox) so the rocket, the smoke and the satellite with its panels open all fit.

With reduced motion

No journey, no shake, no flicker and no smooth scrolling: the story is split into still moments (on the pad, each number, ignition, liftoff, Max Q, black sky, separation, fairing, orbit). As you scroll, the scene and the words fade out, come back already at the next moment and the sky changes colour with a fade.

Pitfalls

The falling stage’s pivot, worked out from the group’s box, sat far below the rocket because the group also held the long plume: the stage spun round a point in thin air. Flames and plume sit outside the falling group.
A shake made as a tween in the timeline stopped when the scroll stopped: the timeline only says how much to shake, the actual shake is a time-based ticker.
The flame colour written as var(--accento) in the gradient’s stop-color attribute does not work (SVG attributes do not read CSS variables): it goes in style.
The second stage’s nozzle peeked out between the first and second stage: the interstage is taller and hides it until the first stage leaves.
With the words dark on a sky turning deep blue, “Max Q” was hard to read: the words change colour before the sky darkens, at a moment when no word is on stage.

Libraries

GSAP 3.15.0, Lenis 1.3.26, Big Shoulders Display (font variabile) 5.3.0, Martian Mono (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 12 KB; the libraries: GSAP + ScrollTrigger 45 KB, Lenis 5.3 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.