The garden that blooms

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

Scroll inside the preview

A seed shop’s page: as you scroll, stems rise from the earth at the bottom of each section, drawing themselves and leaning over, leaves open with a spring and buds bloom one petal at a time into poppies, daisies, tulips and cosmos, with bees and butterflies flying from flower to flower. Scroll back up and it all closes 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 blooming garden</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/mona-sans@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- la testata del vivaio inventato -->
  <header class="testata">
    <p class="marchio">Wildling <span>Seed Co.</span></p>
    <nav class="menu" aria-label="Main">
      <a href="#poppy">Seeds</a>
      <a href="#cosmos">Sowing</a>
      <a href="#fine">Shop</a>
    </nav>
  </header>

  <main>
    <!-- l'apertura: il titolo e tre semi che cadono nella terra -->
    <section class="apertura" data-apertura>
      <p class="apertura__etichetta" data-entra>Heirloom flower seeds, packed by hand</p>
      <h1 class="apertura__titolo">
        <span class="riga"><span data-riga>Grown slow,</span></span>
        <span class="riga"><span data-riga>picked <em>wild.</em></span></span>
      </h1>
      <p class="apertura__testo" data-entra>Four meadow favourites in small batches. Scroll down and watch them come up.</p>
      <p class="apertura__cenno" data-cenno data-entra>
        Scroll to sow
        <svg viewBox="0 0 24 32" aria-hidden="true"><path d="M12 3V27M4 19L12 28L20 19" /></svg>
      </p>
      <svg class="apertura__terra" data-terra-apertura aria-hidden="true"></svg>
    </section>

    <!-- le quattro aiuole: il palco resta fermo e, scorrendo, i fiori crescono e sbocciano -->
    <section class="aiuola aiuola--poppy" id="poppy" data-aiuola data-fiore="poppy">
      <div class="palco">
        <div class="scheda">
          <p class="scheda__latino">Papaver rhoeas</p>
          <h2 class="scheda__nome">Field Poppy</h2>
          <p class="scheda__testo">Paper-thin petals that open at dawn and drop by dusk. Scatter on bare soil and forget about them.</p>
          <dl class="scheda__dati">
            <div><dt>Sow</dt><dd>March to May</dd></div>
            <div><dt>Blooms</dt><dd>June to August</dd></div>
          </dl>
        </div>
        <svg class="giardino" data-giardino aria-hidden="true"></svg>
      </div>
    </section>

    <section class="aiuola aiuola--daisy" id="daisy" data-aiuola data-fiore="daisy">
      <div class="palco">
        <div class="scheda">
          <p class="scheda__latino">Leucanthemum vulgare</p>
          <h2 class="scheda__nome">Ox-eye Daisy</h2>
          <p class="scheda__testo">The meadow classic. Comes back every year, a little thicker each time.</p>
          <dl class="scheda__dati">
            <div><dt>Sow</dt><dd>April to June</dd></div>
            <div><dt>Blooms</dt><dd>May to September</dd></div>
          </dl>
        </div>
        <svg class="giardino" data-giardino aria-hidden="true"></svg>
      </div>
    </section>

    <section class="aiuola aiuola--tulip" id="tulip" data-aiuola data-fiore="tulip">
      <div class="palco">
        <div class="scheda">
          <p class="scheda__latino">Tulipa sylvestris</p>
          <h2 class="scheda__nome">Wild Tulip</h2>
          <p class="scheda__testo">A slender cup that opens to the sun and closes again at night.</p>
          <dl class="scheda__dati">
            <div><dt>Plant</dt><dd>October to November</dd></div>
            <div><dt>Blooms</dt><dd>April to May</dd></div>
          </dl>
        </div>
        <svg class="giardino" data-giardino aria-hidden="true"></svg>
      </div>
    </section>

    <section class="aiuola aiuola--cosmos" id="cosmos" data-aiuola data-fiore="cosmos">
      <div class="palco">
        <div class="scheda">
          <p class="scheda__latino">Cosmos bipinnatus</p>
          <h2 class="scheda__nome">Cosmos</h2>
          <p class="scheda__testo">Feathery leaves, flowers on long wiry stems, and the bees will not leave it alone.</p>
          <dl class="scheda__dati">
            <div><dt>Sow</dt><dd>April to May</dd></div>
            <div><dt>Blooms</dt><dd>July to October</dd></div>
          </dl>
        </div>
        <svg class="giardino" data-giardino aria-hidden="true"></svg>
      </div>
    </section>

    <footer class="fine" id="fine">
      <p class="fine__frase">Sow now, <em>bloom by June.</em></p>
      <a class="fine__bottone" href="#poppy"><span>Shop the seeds</span></a>
    </footer>
  </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.

73 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 garden that blooms” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

The page of a made-up nursery, Wildling Seed Co., on cream paper. At the top a big title, «Grown slow, picked wild.», and at the bottom a strip of earth: three seeds bounce into it and three sprouts come up, open their two little leaves and then rock in the breeze. Below come four beds, one per flower: poppy, daisy, wild tulip and cosmos, each with its own background colour, the Latin name, the big name, two lines and when to sow and when it blooms. When a bed arrives the stage stops and stems rise from the earth at the bottom: they draw themselves from the bottom up, each with its green bud on top, then lean to one side with a little bounce, and along the stem the leaves spring open. Then the buds split into two sepals and the petals come out one at a time, fanning from the top to the sides, each on its own spring, until the heart of the flower swells in the middle. Most flowers belong to the bed, a few come from another. When the flowers are open, bees and butterflies arrive from the sides: they fly from one open flower to the next, settle for a moment and leave again, the bees beating their wings very fast, the butterflies more slowly. The whole garden sways in the wind. Scroll back and the flowers close, the leaves fold, the stems go back into the earth and the insects leave. The pointer over a flower pushes it: the flower swells a little and the stem rocks back and forth until it settles. The header slides away while you scroll down and comes back as soon as you scroll up.

How it works

The still stage

Every bed is a section 2.4 screens tall holding a sticky stage 100lvh tall: the text at the top, below it an SVG that takes all the space left. The SVG’s viewBox is as big as the SVG in pixels, so one unit is one pixel. At the bottom lies the strip of earth, a wavy path with a few pebbles, drawn over the feet of the stems.

Plants are numbers

Each plant is an object with four numbers from 0 to 1: g (how far it has grown), b (how far it leans), one for each leaf and o (how open the flower is). One timeline per bed moves them, tied to the scroll with scrub from when the section reaches 25% of the screen to when the stage lets go: g with power2.out, b with elastic.out, the leaves with elastic.out at the moment the stem reaches them, o over 2.8/BLOOM units. A pause with the flowers open closes it. Scroll back and the timeline runs backwards, so the garden closes by itself.

The stem that draws itself

Every frame a GSAP ticker rebuilds the stem as a cubic Bézier curve: the foot is in the earth, the tip moves sideways by STEM_CURVE times b, plus the wind (two sines with different phases, times WIND) and the push of the pointer. The stem has pathLength=1, stroke-dasharray 1 2 and stroke-dashoffset 1−g: it draws from the bottom. To put the bud right on the tip of the stroke, the curve is measured in sixteen pieces and the point at that share of the length is found; the leaves sit there too, turned along the tangent.

Petals one at a time

The flower head is a group with a translation, a rotation (the stem’s tangent) and a scale. Every petal is the same path turned to its angle: closed it points up, narrow and short, so it peeps out coloured from the top of the bud; open it sits at its angle at full size. Each petal has a window of o that starts a little after the previous one (the top ones first) and inside it runs through elastic.out, taken with gsap.parseEase: even under scrub every petal lands on its own spring. The two halves of the bud part and stay behind as sepals; the heart grows last.

Insects and pointer

Bees and butterflies appear when the average o passes one half: they pick an open flower nobody else is visiting and get there on a damped spring (speed plus a pull towards the goal minus friction, every frame), with a wobble on top; after a moment perched they pick another. The wings beat on a sine: bees fast and up and down, butterflies across. A transparent circle on every flower listens for pointerenter and pointerdown: a swing number goes to ±1 and back to 0 with elastic.out, pushing the stem’s tip by SWAY.

Values to change

Name	File	Default	What it changes
`DENSITY`	script.js	`9`	How many plants grow in each bed on a computer; a phone gets about two thirds.
`STEM_CURVE`	script.js	`0.6`	How far the stems lean once grown: 0 straight up, 1 nodding heads.
`BLOOM`	script.js	`1`	How fast the buds open as you scroll: 0.5 slowly, 2 all at once.
`WIND`	script.js	`1`	How strongly the breeze moves the stems: 0 is still air.
`INSECTS`	script.js	`3`	How many bees and butterflies fly in each bed.
`SWAY`	script.js	`1`	How hard a flower swings when the pointer touches it.
`MIX`	script.js	`0.3`	The share of each bed given to the other three flowers: 0 only the bed’s own flower.
`--papavero`	style.css	`#d9412b`	The colour of the poppies; next to it are those of the daisies, tulips and cosmos and of their hearts.

Try them in the Playground

When to use it

For anyone who sells or tells about something that grows: a nursery, a seed or plant shop, a florist, a community garden, a natural cosmetics brand, a catalogue’s spring page, or a story that should bloom as it is read.

On phones

The same animation with the sizes adapted: about two thirds of the plants, slightly smaller flowers and insects, the bed’s text in a column above the garden; the plants near the edges lean towards the middle so no flower leaves the screen. A tap on a flower makes it swing.

With reduced motion

No growing, no wind, no flying and no smooth scrolling: the plants are already grown and the flowers open, with a few bees and butterflies perched, and each garden fades in when its bed arrives. The opening title and sprouts fade in too.

Pitfalls

With pathLength=1 the stroke-dashoffset goes from 1 to 0, but the curve is built by parameter and not by length: with the bud at parameter g it lagged behind or ran ahead of the stroke. The curve is measured in sixteen pieces and the bud goes to the point really at that share of the length.
The bud’s two halves with a curved inner edge left a slit of background colour in the middle, and the bud looked like a ring. The inner edge is straight and the halves overlap by a little over a pixel.
Under scrub, an elastic on the tween of the whole flower makes all petals bounce together. The tween moves only o, with no curve, and each petal runs its own share of o through gsap.parseEase('elastic.out(1, 0.5)'): so they spring one at a time, forwards and backwards.
Plants near the edges leaning outwards carried their flower off screen, above all on a phone. Those in the first and last fifth lean towards the middle, and the lean never goes beyond the room left to the edge.
Redrawing every plant every frame even off screen is a waste: a second ScrollTrigger per bed says when it is visible, and the petals are rewritten only when o changes.

Libraries

GSAP 3.15.0, Lenis 1.3.26, Fraunces (font variabile) 5.3.0, Mona Sans (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 14 KB; the libraries: GSAP + ScrollTrigger 45 KB, Lenis 5.3 KB.

Testing

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