The museum skeleton on hover

Hover, SVGGSAPAdvancedCompressed weight: Demo 13 KBGSAP 28 KBFreeDownload the zip

The header of a made-up natural history museum, in the rich style: in the great hall, under the skylight, the T-rex plinth is empty. Moving the pointer across the hall or tapping it brings the bones flying in from the sides, a group at a time, each snapping onto its neighbour with a click and a puff of dust: the legs, the pelvis, the back, the tail, the ribs, the little arms, the neck, the skull and the jaw. Once whole, the tyrannosaur opens its jaws and shakes its head, then breathes and follows the pointer with its head; “Rebuild” takes it apart and it starts again.

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 museum skeleton on hover</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/bricolage-grotesque@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- a made-up natural history museum, Strata. In the great hall the T-rex plinth is empty: moving across the hall
       (or tapping it) brings the bones flying in one by one, each snapping onto its neighbour with a puff of dust,
       until the whole skeleton stands, opens its jaws and shakes its head. Hall, plinth, rope and bones are SVG
       drawn by the script -->
  <main class="sala" data-sala>
    <svg class="fondo" data-fondo viewBox="0 0 1600 900" preserveAspectRatio="xMidYMax slice" aria-hidden="true"></svg>

    <header class="testata">
      <p class="marchio">
        <svg viewBox="0 0 32 32" aria-hidden="true"><path d="M5 26h22M7 26V13M12 26V13M20 26V13M25 26V13M4 13h24L16 5Z"/></svg>
        Strata
      </p>
      <p class="sotto">Museum of Natural History</p>
    </header>

    <div class="testo">
      <h1 class="titolo">Rex is back <em>on its feet.</em></h1>
      <p class="riga">The great hall reopens with its T-rex, bone by bone. Open daily, nine to six.</p>
      <div class="azioni">
        <a class="pillola" href="#visit"><span>Plan your visit</span></a>
        <button class="rifai" type="button" data-rifai hidden>
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12a8 8 0 1 0 2.6-5.9M4 4v4.5h4.5"/></svg>
          <span>Rebuild</span>
        </button>
      </div>
    </div>

    <div class="rex">
      <svg class="rex__svg" data-rex viewBox="0 0 820 470" role="img" aria-labelledby="rex-nome">
        <title id="rex-nome">A Tyrannosaurus rex skeleton being put together on its plinth</title>
      </svg>
    </div>

    <p class="aiuto" data-aiuto>
      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 13V5.5a1.5 1.5 0 0 1 3 0V11m0-1.5a1.5 1.5 0 0 1 3 0V11m0-1a1.5 1.5 0 0 1 3 0v4.5a6 6 0 0 1-6 6h-.5a6 6 0 0 1-4.8-2.4L4.6 15a1.5 1.5 0 0 1 2.3-1.9L8 14"/></svg>
      <span>Move across the hall to rebuild Rex</span>
      <span class="aiuto__conta" data-conta aria-live="polite"></span>
    </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.

27 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 museum skeleton on hover” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

A museum hall drawn in SVG: the coffered ceiling with the skylight and its beam of light, four columns with capitals and bases, two red banners with a gold ammonite, two display cases with an ammonite and a fossil fish, the dark arch of a doorway at the back and the polished marble floor. In the middle, on the stone plinth with its brass plaque and the velvet rope on brass posts, there are only the two steel rods. Every stretch the pointer travels across the hall (or every tap) calls the next group of bones: it arrives from one side in an arc, spinning, and settles with a small overshoot and a bounce, raises a puff of dust and makes the skeleton shiver. With nobody around, the museum builds Rex by itself. When the last bone, the jaw, is in place, the jaws open wide and the head shakes; then the ribs rise and fall with the breath, the tail sways and the head looks towards the pointer. “Rebuild”, or a few quiet seconds, takes it apart: the bones fly off to the sides and it starts again.

How it works

The skeleton is a rig

Each bone has a parent, the point on the parent it hangs from (a fraction of its length and an offset to the side), an angle and a length. On every frame calcola() works out from these numbers where each bone is and at what angle, from the pelvis out to the tips (forward kinematics). So no bone can come off its neighbour: the breath, the roar and the gaze only change angles.

The bones, drawn

Each bone is an SVG shape drawn along its axis, from the joint to the tip: long bones with their heads and a waisted shaft, vertebrae with their body, spine and, in the tail, the chevron below, curved ribs, the pelvis with ilium, booted pubis and ischium, the skull with its windows in the bone and its teeth, the jaw. A gradient from light ivory to shade, a brown outline, a line of light and a few cracks give them volume.

The flight and the click

The flight is an extra offset on top of the computed place: it starts to the side and high up, rotated, at 0.85 of its size, and goes back to zero with different curves for x and y (so it makes an arc) and back.out on the scale, which gives the click. On arrival, a puff of dust ellipses that spread and fade, and a small elastic shiver of the whole skeleton.

Who calls the bones

pointermove adds up the distance the pointer travels: every STEP pixels the next group leaves; a tap calls one straight away. If nobody has moved for two seconds, one leaves every PACE seconds. Once Rex is complete and left alone for WAIT seconds, the hall takes it apart and builds it again.

The roar and the breath

A timeline opens the jaw by ROAR degrees and shakes the neck and head with a fast sine that dies away; then the ribs follow a slow sine (BREATH), the tail a wave and the head tilts up or down towards the pointer, with a soft follow.

Values to change

Name	File	Default	What it changes
`STEP`	script.js	`70`	How many pixels the pointer travels to call the next group of bones.
`PACE`	script.js	`0.3`	Seconds between groups when the hall builds Rex by itself.
`FLIGHT`	script.js	`0.62`	How many seconds a bone flies before it lands.
`SNAP`	script.js	`1.7`	How much a bone overshoots when it clicks into place (1 = none).
`DUST`	script.js	`1`	How big the puffs of dust are (0 = none).
`ROAR`	script.js	`26`	How wide the jaws open when Rex is complete, in degrees.
`BREATH`	script.js	`1`	How much the ribs move with the breath (0 = still).
`WAIT`	script.js	`4.5`	Seconds Rex stays complete before the hall takes it apart, if nobody moves.

Try them in the Playground

When to use it

As the opening of a museum, an exhibition, a theme park or a guided tour, a site for children and schools, a science app; in general when a first screen should invite people to move and reward them with something that builds itself before their eyes.

On phones

The same animations with the sizes adapted: the skeleton and plinth take the whole width at the bottom of the hall, the title goes on one line above, and every tap on the hall calls a group of bones (a sliding finger calls them too). Left alone, Rex builds itself.

With reduced motion

No flights, clicks, shivers or roar: each group of bones fades in at its place and Rex stays still, without breath or gaze; taking it apart is a fade.

Pitfalls

The tail bones all start from the end of the previous vertebra: only the first one hangs on the pelvis at the joint (a = 0). With a = 0 for all of them, the sixteen vertebrae ended up on top of each other and the tail vanished.
The leg angles came from the sums: with the hip at 170 and bones 100, 92 and 50 long, the toes have to reach 386 to rest on the plinth.
SVG scale() also stretches the outline: the skull is made 1.28 taller with a group, which is fine because the outline is thin.

Libraries

GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Bricolage Grotesque (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 13 KB; the libraries: GSAP 28 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.