The star that turns into a cloud

SVG, Transitions, TextGSAPMediumCompressed weight: Demo 5.3 KBGSAP + MorphSVG 37 KBFreeDownload the zip

A yellow star drops from above and lands with an elastic bounce, and while it is still bouncing it turns into a white cloud. Then the studio’s sun pops up in front of the cloud, swelling and settling in four beats, and a line of text starts running around the whole page.

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 star that turns into a cloud</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/bagel-fat-one@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fredoka@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- the opening of a small studio: a yellow star drops from above, bouncing, and while it is still bouncing it turns
       into a cloud; then the studio's sun pops up in front of it and a line of text starts to run around the page -->
  <main class="palco" data-palco>
    <h1 class="sr">Little Weather, a design and code studio of two</h1>

    <svg class="anello" data-anello aria-hidden="true" focusable="false">
      <defs><path id="giro" data-giro d="M0 0"/></defs>
      <text class="anello__testo" data-misura visibility="hidden"></text>
      <text class="anello__testo" data-testo>
        <textPath href="#giro" data-copia></textPath>
        <textPath href="#giro" data-copia></textPath>
      </text>
    </svg>

    <div class="scena" data-scena>
      <div class="caduta" data-caduta>
        <svg class="disegno" viewBox="0 0 1000 760" aria-hidden="true" focusable="false">
          <!-- the shape the star turns into: never drawn, MorphSVG reads it -->
          <path class="nascosta" data-nuvola d="M338 505A53 53 0 0 1 318 404A70 70 0 0 1 410 326A92 92 0 0 1 540 262A84 84 0 0 1 668 318A62 62 0 0 1 716 420A44 44 0 0 1 700 505Q519 514 338 505Z"/>
          <path class="forma" data-forma d="M500.0 222.0 L530.3 278.8 L588.2 250.6 L579.3 314.4 L642.7 325.6 L598.0 372.0 L642.7 418.4 L579.3 429.6 L588.2 493.4 L530.3 465.2 L500.0 522.0 L469.7 465.2 L411.8 493.4 L420.7 429.6 L357.3 418.4 L402.0 372.0 L357.3 325.6 L420.7 314.4 L411.8 250.6 L469.7 278.8Z"/>
          <g class="sole" data-sole>
            <circle cx="606" cy="452" r="112"/>
            <text class="sole__parola" x="606" y="440" text-anchor="middle">LITTLE</text>
            <text class="sole__parola" x="606" y="492" text-anchor="middle">WEATHER</text>
          </g>
        </svg>
      </div>
      <svg class="scintille" data-scintille viewBox="0 0 1000 760" aria-hidden="true" focusable="false">
        <g transform="translate(212 236)"><path data-scintilla d="M0 -26C3 -6 6 -3 26 0C6 3 3 6 0 26C-3 6 -6 3 -26 0C-6 -3 -3 -6 0 -26Z"/></g>
        <g transform="translate(812 214) scale(0.7)"><path data-scintilla d="M0 -26C3 -6 6 -3 26 0C6 3 3 6 0 26C-3 6 -6 3 -26 0C-6 -3 -3 -6 0 -26Z"/></g>
        <g transform="translate(262 608) scale(0.55)"><path data-scintilla d="M0 -26C3 -6 6 -3 26 0C6 3 3 6 0 26C-3 6 -6 3 -26 0C-6 -3 -3 -6 0 -26Z"/></g>
      </svg>
    </div>

    <button class="ancora" type="button" data-ancora hidden>
      <span class="ancora__fondo" aria-hidden="true"></span>
      <span class="ancora__testo">Play it again</span>
    </button>
  </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/MorphSVGPlugin.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.

28 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 star that turns into a cloud” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

The opening of a made-up studio of two people, Little Weather, on a blue sky. A yellow ten-pointed star starts above the screen and falls to the middle in three seconds on an elastic curve: it arrives, goes a little too far, comes back up and wobbles less and less. At eight tenths of a second, while it is still wobbling, the star changes shape: in one second the points round off and puff up into a cloud, and the yellow turns white. Once the change is over, a sun with the studio’s name pops up in front of the cloud: it grows a little past its size, pulls back, swells again and stops. Then three little stars appear, slowly turning, and all around the page, on a frame with round corners, a line of capital letters keeps running: along the bottom it reads straight, up the right side it climbs, along the top it reads upside down. At the end the «Play it again» button appears, and runs it all again from the start.

How it works

The elastic fall

The star sits in a box that starts FROM hundredths of the screen above its place and comes down in FALL seconds on GSAP’s elastic.out curve. The two numbers of BOUNCE belong to the curve: how far past the landing point it goes and how quick the wobbles are (1 and 0.3 are GSAP’s usual ones).

The shape that changes mid-bounce

The cloud is a second path in the same SVG, never drawn: MorphSVG turns the star’s path into the cloud’s, with map: 'size' so the parts are paired by size. The star has twenty corners and the cloud is made of arcs: the plugin turns everything into curves and adds points where they are missing. In the same tween the fill goes from yellow to white. The change starts at MORPH_AT seconds, while the fall is not over yet: the new shape arrives bouncing.

The sun in four beats

The sun starts at scale zero and goes through the sizes in POP, each in its own time from POP_TIME, on a soft curve: it swells past its proper size, pulls back, swells again and settles. It is a bounce made by hand, tween after tween: you can decide how far past it goes each time.

The text that runs around

The frame is a rectangle with round corners drawn by the script from the size of the page, starting in the middle of the bottom edge and going right: so at the bottom the text reads straight and at the top upside down. The line is repeated until it is as long as the frame, and the letters are spread by a hair so that it ends exactly where it starts. Two copies of the line sit on the same path, one a whole turn behind the other, and a number that grows with time moves them together: one turn every AROUND seconds.

Once more

The whole opening is a paused GSAP timeline; once the text has appeared, the «Play it again» button shows up and starts it from zero. The spaces around the slashes of the line are spaces that do not collapse, otherwise the gap between the end of one repeat and the start of the next would disappear.

Values to change

Name	File	Default	What it changes
`FALL`	script.js	`3`	The seconds of the fall, bounce included (as on the site).
`FROM`	script.js	`70`	How high the star starts, in hundredths of the screen (70 on the site).
`BOUNCE`	script.js	`[1, 0.3]`	The elastic curve: how far it overshoots and how quick the wobbles are.
`MORPH_AT`	script.js	`0.8`	When the star starts turning into the cloud, in seconds (0.8 on the site).
`MORPH`	script.js	`1`	How long the change of shape takes.
`POP`	script.js	`[1.15, 0.96, 1.06, 1]`	The sizes the sun goes through when it pops up (the site’s).
`POP_TIME`	script.js	`[0.55, 0.2, 0.2, 0.18]`	How long each of those steps takes, in seconds.
`FADE`	script.js	`1`	How long the text and the little stars take to fade in.
`AROUND`	script.js	`20`	The seconds for one whole turn of the text (20 on the site).
`WORDS`	script.js	`'Little Weather / design and code / a studio of two / Lisbon'`	The line that runs around the page.
`TWINKLE`	script.js	`24`	The seconds a little star takes to turn once.

Try them in the Playground

When to use it

For the opening of a small studio, a portfolio or a brand with a simple symbol: the shape that falls and changes tells the brand in three seconds, and the text around it stays as a frame while you look at the page.

On phones

The same: the cloud takes up almost the whole width and the frame of text stretches upright with the screen, with smaller letters.

With reduced motion

No fall and no change of shape: the cloud and the sun are already in place, the text around fades in and stands still.

Pitfalls

The change of shape starts while the fall goes on: it must be a separate tween on an element other than the falling one, otherwise the transform of the fall and the morph get in each other’s way.
Spaces at the end of an SVG text are neither drawn nor measured: the repeated line would look one space shorter on every turn. That is why the spaces around the slashes are spaces that do not collapse, and the length of one repeat is measured as the difference between two repeats and one.
The two copies of the text must be exactly as long as the frame: if the line is longer, the end of one copy lands on top of the start of the other.
The sun grows from its centre only if the origin is set before the first tween: in an SVG GSAP works it out from the element’s box.

Libraries

GSAP 3.15.0, MorphSVG (GSAP) 3.15.0, Bagel Fat One 5.3.0, Fredoka (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 5.3 KB; the libraries: GSAP + MorphSVG 37 KB.

Testing

Tested on 6 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.