The loader that becomes a logo
Transitions, SVG, Text
NewFree
Back to the library
The select-all transition
A page change in the minimal style: on a click the whole page gets selected the way a text editor does it, line by line, and the words turn white on the blue highlight. The lines close into one blue sheet that swallows the text, the sheet opens again on the lines of the new page, already selected, and the selection lets go of them one by one; at the end the text cursor blinks twice.
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>The select-all transition</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/opsz.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<!-- the first note: every line of text can be selected, and the selection becomes the curtain -->
<section class="page page--a is-on" data-page="a" aria-label="Cutting">
<header class="bar">
<span class="brand" data-sel>Margin</span>
<nav class="nav" aria-label="Notes">
<a href="#cutting" aria-current="page" data-sel>Cutting</a>
<a href="#white-space" data-go="b" data-sel>White space</a>
</nav>
</header>
<article class="note">
<p class="label" data-sel>Notes on writing</p>
<h1 class="title" data-sel data-title>Cut the second sentence.</h1>
<p class="body" data-sel>Most paragraphs say their thing once, then say it again to be sure. Find the sentence that repeats the first one and take it out. The page gets lighter, and the reader trusts you more.</p>
<a class="go" href="#white-space" data-go="b" data-autoclic data-sel>
<span class="go__t">Next note</span>
<svg class="go__arrow" viewBox="0 0 26 12" aria-hidden="true"><path d="M1 6h22M18.5 1.5 23.5 6l-5 4.5"/></svg>
</a>
</article>
<footer class="foot">
<span data-sel>A letter about writing</span>
<span data-sel>Every other Sunday</span>
</footer>
</section>
<!-- the second note, dark -->
<section class="page page--b" data-page="b" aria-label="White space" aria-hidden="true">
<header class="bar">
<span class="brand" data-sel>Margin</span>
<nav class="nav" aria-label="Notes">
<a href="#cutting" data-go="a" data-sel>Cutting</a>
<a href="#white-space" aria-current="page" data-sel>White space</a>
</nav>
</header>
<article class="note">
<p class="label" data-sel>Notes on writing</p>
<h2 class="title" data-sel data-title>Leave room around it.</h2>
<p class="body" data-sel>A good line needs air the way a picture needs a wall. Give the sentence that matters its own paragraph, wide margins and nothing beside it. Space is how a page raises its voice.</p>
<a class="go go--back" href="#cutting" data-go="a" data-autoclic data-sel>
<svg class="go__arrow" viewBox="0 0 26 12" aria-hidden="true"><path d="M25 6H3M7.5 1.5 2.5 6l5 4.5"/></svg>
<span class="go__t">Back to cutting</span>
</a>
</article>
<footer class="foot">
<span data-sel>A letter about writing</span>
<span data-sel>Every other Sunday</span>
</footer>
</section>
<!-- the text cursor; the highlights of the selection are built by the script inside each page, under its text -->
<div class="caret" data-caret 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.
32 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 select-all transition” from Animorio and fit it into my siteWhat it does
The site of a made-up letter about writing, Margin, in two notes: the first paper-coloured, Cut the second sentence., the second nearly black, Leave room around it., both with a headline in Newsreader, a paragraph, a link and a footer. On load the text appears only where the selection gets to: a blue highlight runs line by line from the top and leaves the words white, then the selection lets go of them from the bottom and the text cursor blinks twice at the end of the headline. A click on Next note starts the selection from the link's line and spreads it up and down: each line is highlighted from left to right, its words turning white as the blue reaches them. Then the lines close up: each widens to the edges of the screen and halfway to the lines around it, starting from the ones next to the link, and the white words fade into the blue until the screen is one solid blue sheet. Under the sheet the dark note is already there; the sheet opens again on its lines, each band narrowing onto its line and the words coming back white. From the bottom up the selection lets go of the lines, which empty from left to right, and the cursor blinks twice after the new headline. A click on Back to cutting does the same the other way.
How it works
Real lines, from the words
Every text marked with data-sel is split into words (one span per word, the spaces stay as text), and the lines are found by grouping the words that sit at the same height: so they are the lines as the browser set them, breaking wherever it likes. Each line has its own highlight, a blue div in the same page, under the text (z-index -1 inside a page with isolation: isolate). Lines at the same height (the brand and the menu, the two ends of the footer) make a single row.
The bands that close the screen
Each row owns a band of the screen, edge to edge, from halfway to the row above to halfway to the row below; the first one starts at the top edge and the last one reaches the bottom. Closing means going from the line's rectangle to its band's: the bands overlap by a pixel, so they cover everything without leaving hairlines. The new page starts with its bands closed, so the swap under the sheet never shows.
Timing made of numbers
The timeline moves only four numbers from 0 to 1 (select, close, open, let go) with ease none. Each line works out its own timing from them through its place in the order (from the link's row outwards, in reading order, from the bottom up) and runs it through its curve: power2.out for the selection, power3.inOut for closing, power4.inOut for opening. The measures are taken again on every resize and the drawing reads them every frame: if the window changes halfway, the text wraps somewhere else and the bands follow the new lines.
The words that turn blue
A word is selected when its centre is under its line's highlight: then it turns white, and as the line closes the white is mixed into the blue with color-mix in proportion to the closing, until the word vanishes into the sheet. The links' arrows are treated as words, so the sheet swallows them too. The link's hover makes the same gesture in small: a highlight running under its words.
The cursor, the phone and reduced motion
At the end the cursor, a two-pixel blue bar as tall as the line, stands after the headline's last line and blinks BLINKS times with sets in the timeline (so the preview video sees all of it). On a phone the lines are shorter and more numerous, and the bands thinner. With reduced motion the two notes swap with a fade.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
SELECT | script.js | 0.75 | The seconds the selection takes to run over the whole page. |
CLOSE | script.js | 0.6 | The seconds the highlights take to close into one sheet. |
OPEN | script.js | 0.7 | The seconds the sheet takes to open on the lines of the new page. |
LETGO | script.js | 0.7 | The seconds the selection takes to let go of the new lines. |
BLINKS | script.js | 2 | How many times the cursor blinks at the end: 0 = no cursor. |
SPEED | script.js | 1 | The speed of everything: 2 is twice as fast, 0.5 half as fast. |
When to use it
To go from one article to the next on a site made of text: a blog, a newsletter, a writing or translation studio's magazine, the docs of a text editor, the site of a writing app. It suits places where the pages are mostly words, because the text itself is the curtain.
On phones
The same transition: the text wraps more often, so there are more lines and thinner bands, and the selection, the closing and the letting go follow the lines as the phone sets them.
With reduced motion
Nothing moves: the new note fades in over the old one, with no selection and no cursor.
Pitfalls
- Highlights laid on top of the text would hide it: they live inside their page, under the text, and the page has isolation: isolate so the negative z-index does not drop below its background.
- The links' arrows stayed dark in the middle of the closed blue sheet: the arrows are treated as words too and fade into the blue.
- Between two closed bands a light hairline stayed where the edges fell on half pixels: the bands grow a pixel on each side and overlap.
- Resizing halfway wraps the text somewhere else and changes the number of lines: that is why the timeline holds not one tween per line but four numbers, and each line works out its timing from them when it is drawn.
- If the words stayed white under the sheet, the swap of the two pages would show as a jump in the text: the selected words fade into the blue as their line closes, and the new page's words come out of the blue as theirs opens.
Libraries
GSAP 3.15.0, Newsreader (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 7.6 KB; the libraries: GSAP 28 KB.
Testing
Tested on 19 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.
