The flow lines page transition

Transitions, HoverGSAP, Canvas, CSS onlyMediumCompressed weight: Demo 8.1 KBGSAP 28 KBFreeDownload the zip

A page transition made of streamlines: from the point you click, hundreds of thin lines follow a flow field bent by soft eddies, cross the screen in the colour of the incoming page, widen until they cover it and then leave by the edges as thin tails while the new heading rises. The heads of the leading lines are vermilion. Minimal style.

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>Leeward</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- two pages of an invented sail loft; the link starts a flow of thin lines from where you click:
       they cross the screen along a flow field, thicken until they cover the page, and thin out on the new one -->
  <main class="sito" data-sito>

    <section class="pagina pagina--notte" data-pagina="a" aria-label="Index">
      <header class="testa">
        <p class="marchio">Leeward</p>
        <p class="nota">Sail loft, est. on the coast</p>
      </header>
      <div class="eroe">
        <p class="occhiello" data-entra>Index</p>
        <h1 class="titolo">
          <span class="riga"><span class="riga__dentro" data-riga>Follow</span></span>
          <span class="riga"><span class="riga__dentro" data-riga>the current.</span></span>
        </h1>
        <a class="pillola" href="#loft" data-vai="b" data-autoclic data-entra>
          <span class="pillola__scritta">Into the loft</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>
      <footer class="piede">
        <svg class="vento" viewBox="0 0 64 16" aria-hidden="true"><path d="M1 5c12-4 24 4 38 0s18-2 24 1" /><path d="M1 11c14-3 26 3 40 0s16-1 22 1" /></svg>
        <p class="nota">Click the link: the flow starts where you click</p>
      </footer>
    </section>

    <section class="pagina pagina--giorno" data-pagina="b" aria-label="The loft" hidden>
      <header class="testa">
        <p class="marchio">Leeward</p>
        <p class="nota">The loft</p>
      </header>
      <div class="eroe">
        <p class="occhiello" data-entra>The loft</p>
        <h1 class="titolo">
          <span class="riga"><span class="riga__dentro" data-riga>Cut where</span></span>
          <span class="riga"><span class="riga__dentro" data-riga>the air moves.</span></span>
        </h1>
        <a class="pillola" href="#index" data-vai="a" data-autoclic data-entra>
          <svg class="pillola__freccia pillola__freccia--indietro" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.5 8H3M7 3.8 2.8 8 7 12.2" /></svg>
          <span class="pillola__scritta">Back to index</span>
        </a>
      </div>
      <footer class="piede">
        <svg class="vento" viewBox="0 0 64 16" aria-hidden="true"><path d="M1 5c12-4 24 4 38 0s18-2 24 1" /><path d="M1 11c14-3 26 3 40 0s16-1 22 1" /></svg>
        <p class="nota">Twelve sails a season, cut by hand</p>
      </footer>
    </section>

    <canvas class="velo" aria-hidden="true" data-velo></canvas>
  </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.

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 flow lines page transition” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

Two pages of an invented sail loft, Leeward: the index on an almost pure black, with the heading Follow the current, and the loft page on a warm white, with Cut where the air moves. Click the Into the loft link and a flow starts from the exact point of the click: three hundred and twenty very thin lines are born in a ray and follow the streamlines of a field, the push away from the click bent by soft noise eddies, stronger far from the point, so near the click the lines leave straight and then curl like air passing round something. They run towards the edges in the colour of the incoming page, each with its own small delay and one of three transparencies; the heads of one line in seven are vermilion. As they run they widen, until they fuse and the new colour covers everything; meanwhile the old heading rises a little and fades. Underneath is the new page: the tails of the flow, thin and in the colour of the previous page, escape by the edges, and the new heading rises line by line from under its mask, with a one-pixel settle. The Back to index link makes the trip in reverse, from its own point. Hovering the link, ten short threads of wind rise from the pill and bend in the same field, and the pill swells full with its text widening. At the bottom two thin lines flow slowly next to the note, like a windsock.

How it works

The field and the noise

The direction at each point is the angle away from the click plus VORTICE times a soft gradient noise (a grid of gradients with smooth interpolation), at the scale GRANA. The weight of the noise grows with the distance from the click: near the point the lines leave straight, far away they curl.

Tracing the streamlines

On click each line starts on a small circle round the point and moves with a midpoint step (it looks at the direction halfway), shorter near the click and longer far away, until it leaves the page. The points and the length travelled at each step are stored, so any stretch of the line between two lengths can be drawn.

The arrival that covers

A timeline takes t from 0 to DURATA. Each line is drawn from 0 to its head, which runs with power2.inOut and a small random delay. The width grows from the thin size to the gap between two lines on the furthest edge times COPERTURA; in the last quarter the new colour fills the holes. Three paths for the three transparencies, one for the vermilion heads.

The swap and the tails

When the new colour covers everything, the old page hides and the new one appears underneath; for 0.6 times DURATA only the tails are drawn, from a point moving forward with power3.out to the end of the line, thin and in the old colour, while the new heading rises line by line with expo.out.

The thread of wind

When the mouse passes over the link, ten short lines are traced from the pill in the same field, and a 50 px stroke runs along each one in a continuous loop, its strength rising and falling gently. Everything sits on a single canvas above the pages that does not take clicks.

Values to change

Name	File	Default	What it changes
`LINEE`	script.js	`320`	How many streamlines leave the point of the click.
`DURATA`	script.js	`1.6`	How long the flow takes to arrive, in seconds; the tails leave in 0.6 times that.
`VORTICE`	script.js	`1.1`	How much the noise bends the lines, in radians.
`GRANA`	script.js	`0.0024`	The size of the eddies: smaller means wider eddies.
`COPERTURA`	script.js	`1.5`	How much the lines widen to cover the page, compared with the gap between them.
`TESTE`	script.js	`7`	One line in how many has a vermilion head.

Try them in the Playground

When to use it

As the passage between pages of a site about air, water or movement: a sail loft, a design studio, an aerodynamics lab, a weather or wind app, a portfolio that wants a lively page change with no extra colours. It works between a dark and a light page, because the flow carries the colour of the incoming page.

On phones

The same animations with the sizes adapted: the flow starts from the finger, the lines are measured on the box’s diagonal and cover a small screen too; the heading is smaller and the top note is hidden. The thread of wind is only there with a mouse.

With reduced motion

No flow: the old page fades out and the new one appears with its heading fading in, without rising lines. The two wind lines at the bottom are still.

Pitfalls

With a stroke for every segment the lines would be tens of thousands of strokes: each transparency is a single path, and the heads another.
A click from the keyboard or from the preview has no coordinates (clientX is 0): the flow then starts from the centre of the link.
If the lines only widen a little, gaps are left between them at the edges: the width is measured on the gap between two lines on the furthest edge, and at the end the solid colour closes those that remain.
The lines are recomputed on resize: the demo window can change size halfway through the passage.

Libraries

GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 8.1 KB; the libraries: GSAP 28 KB.

Testing

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