The leaves that turn over

Hover, SVGGSAP, Canvas, CSS onlyMediumCompressed weight: Demo 6.8 KBGSAP 28 KBFreeDownload the zip

A minimal-style hover animation: a field of leaves drawn with a single line, all combed the same way on a warm white; the pointer passes like the wind and the nearby leaves turn over on their midrib, show their sage green underside and swing back on a spring with a little rock. Behind the name of an invented nursery.

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>Hedgerow</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- a combed hedge of thin leaves on a canvas behind the page; the pointer passes like wind and the leaves near it
       turn over on their midrib, show their sage underside and swing back -->
  <main class="pagina" data-pagina>
    <canvas class="fondo" aria-hidden="true" data-fondo></canvas>

    <section class="eroe">
      <div class="blocco" data-blocco>
        <p class="occhiello" data-entra>A nursery for slow gardens</p>
        <h1 class="titolo"><span class="titolo__dentro" data-titolo>Hedgerow</span></h1>
        <div class="azione" data-entra>
          <a class="pillola" href="#">
            <span class="pillola__scritta" data-testo="Visit the nursery">Visit the nursery</span>
            <svg class="pillola__freccia" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 8h10.5M9 3.8 13.2 8 9 12.2" /></svg>
          </a>
        </div>
      </div>
    </section>

    <footer class="piede">
      <p data-nota>Hedges, ferns and shade plants</p>
      <p data-nota>Open Thursday to Sunday</p>
    </footer>
  </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.

21 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 leaves that turn over” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

A warm white covered by a field of small leaves drawn with a single grey line: the almond outline, the midrib and a hint of stalk, all turned the same way like a combed hedge, with a touch of disorder. On opening the leaves sprout from the middle towards the edges and the nursery's name, Hedgerow, rises from its window light and settles bold. The pointer passes like the wind: the nearby leaves turn over on their midrib, narrow to a line and open again on the other side showing their underside, filled with sage green with a pale midrib; they stay turned for a moment and come back on a spring, a hair too far and with a little rock in the direction of the wind. The nearest go first, so the gust spreads out in a ring; the faster the pointer runs, the wider the gust. Around the name, the line above and the pill the leaves thin out, so the words sit on clean white. When nobody moves the pointer, a pretend pointer strolls around the page.

How it works

The combed hedge

On a full-page canvas (devicePixelRatio up to 2) a leaf is placed every SPACING pixels, in rows staggered by half a step like leaves on parallel branches. Each leaf has the direction of the hedge (COMB) plus a touch of disorder and a scale taken from a fixed pseudorandom number of its position, so the hedge is the same on every visit. Around the heading block and the notes at the bottom the leaves fade: full outside, gone inside, a feather in between.

A leaf, two arcs

Each leaf is two quadratic curves between its two tips, one per side, plus the midrib and the stalk. The turn on the midrib is an angle a from 0 to π: the width of the leaf is multiplied by cos(a), so it narrows to a line halfway and opens again on the other side. When cos(a) is negative the leaf shows its underside: it fills with sage green and the midrib turns pale. The rising half slides the leaf a touch sideways, so you can see which way it turns.

The gust

On every frame each leaf inside the pointer's radius gets a moment to turn over (the nearest first: a delay that grows with distance) and one to come back (later for those in the middle of the gust). The radius starts from REACH, shrinks on small screens and widens with the pointer's speed. The direction of the turn depends on where the pointer runs relative to the leaf.

The spring and the rock

The angle goes towards π or towards 0 on a hand-written spring (SPRING: stiffness and friction), integrated on GSAP's ticker: a hair of overshoot and the settle. A second number, the rock, turns the leaf in its own plane: the speed of the turn pushes it, so a leaf turning over bends slightly with the wind and comes back.

The pretend pointer and reduced motion

A pretend pointer follows a Lissajous curve tied to a twelve-second GSAP timeline that repeats, chased on a soft spring; the real pointer replaces it for 2.4 seconds after every move. An IntersectionObserver stops the ticker when the page is not visible. With reduced motion the leaves don't turn: where the real pointer passes the underside fades in and out.

Values to change

Name	File	Default	What it changes
`SPACING`	script.js	`34`	The distance between leaves, in px (a little more on a phone).
`LEAF_SIZE`	script.js	`24`	The length of a leaf, in px.
`LEAF_WIDTH`	script.js	`0.42`	The leaf's width compared to its length: low is a pine needle, high a round leaf.
`COMB`	script.js	`-38`	The direction of the combed hedge, in degrees.
`REACH`	script.js	`110`	How far the gust of a still pointer reaches, in px.
`GUST`	script.js	`1.2`	How much the gust widens when the pointer runs.
`HOLD`	script.js	`0.55`	How many seconds a leaf stays turned over.
`SPRING`	script.js	`[150, 12]`	The spring that turns the leaves and puts them back: how stiff and how damped.
`LINE`	script.js	`1`	The thickness of the line, in px.

Try them in the Playground

When to use it

As the background of the first screen of a plant nursery, a gardener or a landscape studio, a plant or tea shop, a country hotel or a natural cosmetics brand; generally behind a short heading when you want a page that is alive but calm, reacting as you pass without stealing the show.

On phones

The same animations with the sizes adapted: the leaves are a little larger and sparser, the gust narrows with the screen, the heading is smaller and the clean area follows it. The finger turns the leaves while it touches and drags; when it lifts, the pretend pointer comes back.

With reduced motion

The field is still and the leaves don't turn: where the real pointer passes their green underside fades in and out. No pretend pointer, no sprouting from the middle; the heading, the small line and the pill fade in.

Pitfalls

Multiplying the width by cos(a) is enough for the foreshortening of the turn, but on its own it doesn't show which way the leaf turns: the rising half slides the leaf a fraction of its length in the direction of the turn, and that is what you see.
The first gust after the opening was huge: the pretend pointer came rushing in from outside and its speed widened the radius. Now the real pointer, when it comes back after a pause, starts where it is and not where the pretend one was.
On a phone a radius in pixels equal to the computer's covered a quarter of the screen: it narrows with the page's width, down to 65%.
Fraunces has no width axis: the elastic pill here widens the letter spacing instead of the wdth axis.

Libraries

GSAP 3.15.0, Fraunces (font variabile) 5.3.0.

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