The loader that becomes a logo
Transitions, SVG, Text
NewFree
Back to the library
The letter stem that becomes the page transition
A typographic page change in minimal style: click a link and its first letter turns heavy and vermilion, the other letters slip away sideways, and the letter’s upright stem breaks off, grows to the height of the screen and splits into two edges that open the new page, already in its colour. The new heading arrives letter by letter from wide to narrow. Going back makes the same trip from the B of Back.
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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kerna</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- two pages of an invented type foundry: click a link and the upright stem of its first letter
grows into a bar, then into the whole next page, in that page's colour -->
<main class="sito" data-sito>
<section class="pagina pagina--carta" data-pagina="a" aria-label="Index">
<header class="testa" data-esce>
<p class="marchio">Kerna</p>
<p class="nota">A small, slow type foundry</p>
</header>
<div class="corpo">
<p class="occhiello" data-esce>Index</p>
<h1 class="titolo" data-esce>Type that holds<br>its line.</h1>
<nav class="voci" aria-label="Pages">
<a href="#library" class="voce" data-vai="b" data-pagina-nuova="library" data-autoclic>Library</a>
<a href="#kerning" class="voce" data-vai="b" data-pagina-nuova="kerning">Kerning</a>
<a href="#info" class="voce" data-vai="b" data-pagina-nuova="info">Info</a>
</nav>
</div>
<footer class="piede" data-esce>
<p class="nota">Pick a page: its first letter becomes the page</p>
</footer>
</section>
<section class="pagina pagina--inchiostro" data-pagina="b" aria-label="Page" hidden>
<header class="testa" data-entra>
<p class="marchio">Kerna</p>
<p class="nota" data-nome-pagina>Library</p>
</header>
<div class="corpo">
<p class="occhiello" data-entra data-nome-pagina>Library</p>
<h1 class="titolo" data-titolo-nuovo>Every weight,<br>side by side.</h1>
<nav class="voci" aria-label="Back">
<a href="#index" class="voce voce--torna" data-vai="a" data-autoclic data-entra>Back</a>
</nav>
</div>
<footer class="piede" data-entra>
<p class="nota">Back makes the same trip the other way</p>
</footer>
</section>
<div class="velo" data-velo aria-hidden="true"></div>
<div class="asta" data-asta aria-hidden="true"></div>
<div class="asta" data-asta-destra aria-hidden="true"></div>
</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
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 letter stem that becomes the page transition” from Animorio and fit it into my siteWhat it does
Two pages of an invented small type foundry, Kerna: the index on a warm white, with the heading Type that holds its line and three links, Library, Kerning and Info, and an inner page on an ink black. Click a link and it gives a little under the click while its first letter turns heavy and vermilion; the other letters of the word slip away sideways one after another, and the rest of the page rises slightly and fades. Then the letter’s upright stem, the vertical of L, K, I or B, breaks off: it becomes a vermilion bar that grows up and down to the height of the screen, then splits into two edges that run to the sides pushing the page away, and between them is already the colour of the incoming page; the edges thin as they run and vanish at the sides. Underneath is the new page: the heading arrives letter by letter from very wide to normal on the wdth axis, sliding into place, and settles by a pixel; then the label and the Back link rise. Back makes the same trip from its B, towards the white. Hovering a link, the word widens a little and its first letter turns vermilion, like an invitation.
How it works
Letters in a row
Every link and heading is split into one span per character (lines with a line break). So the link’s first letter animates on its own: weight PESO and vermilion in a quarter of a second, while the others slip FUGA em per place.
The measured stem
The links all start with a letter that has an upright stem on the left. The bar is born over it, from the type size: just after the letter’s edge, 0.15 em wide and as tall as the capitals, and the real letter fades at the same instant, so the swap can’t be seen.
Tall, then wide
The bar grows to the height of the screen in SALITA seconds with power3.inOut. Then a second edge is born at the same point and the two run to the sides in APERTURA seconds with expo.inOut; between them a veil in the new page’s colour widens every frame, so the new colour arrives full, without passing through a brown between vermilion and black.
The heading that narrows
Underneath, the new page is already in place. The heading’s letters start transparent, LARGO wide on the wdth axis and shifted slightly towards the centre, and arrive normal in 0.75 seconds, SFALSA seconds apart; the last to arrive drops everything by a pixel and back up with back.out.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
PESO | script.js | 820 | How heavy the first letter gets before its stem breaks off. |
SALITA | script.js | 0.45 | How long the stem takes to become as tall as the screen, in seconds. |
APERTURA | script.js | 0.62 | How long the two edges take to open the new page, in seconds. |
LARGO | script.js | 125 | From what width on the wdth axis the new heading’s letters arrive (100 is normal). |
SFALSA | script.js | 0.026 | The delay between one letter of the new heading and the next, in seconds. |
FUGA | script.js | 0.06 | How far the other letters of the clicked link slip sideways, in em per letter. |
When to use it
As the passage between pages of a site that lives on typography: a type foundry, a graphic studio, a publisher, a magazine, a designer’s portfolio. It works best with menu links that start with a letter with an upright stem (B, D, E, F, H, I, K, L, M, N, P, R) and between a light and a dark page.
On phones
The same animations with the sizes adapted: the links stack in a column, the heading is measured on the box height and the stem starts from the letter you tap. The top note is hidden.
With reduced motion
No stem and no moving letters: the old page fades out and the new one fades in.
Pitfalls
- A single rectangle changing colour from vermilion to black as it widens passes through a muddy brown: that is why the vermilion edges and the veil in the new colour are two separate things.
- The stem is measured from the type size, not the drawn letter: with letters without an upright stem (O, S, C) the bar is born slightly beside it, and needs another measurement.
- GSAP also interpolates the font-variation-settings string, as long as both strings have the same axes in the same order.
Libraries
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 5.2 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.
