Standing letters with a long shadow
Text, Scroll, 3D
NewFree
Back to the library
The word in the slit
A text animation in the minimal style: a huge word is cut in half by a thin line, the top half slides left and the bottom half right, and in the slit that opens a second word rises, small and widely spaced. Then the halves close on it while it grows and gains weight, and it becomes the new big word.
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 word in the slit</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<!-- the word people read; everything drawn below is only its picture -->
<h1 class="sr" data-read>Slow</h1>
<!-- the rig: one line box of the big word, placed so that the cut runs across the middle of the screen.
The script fills it: the whole word (at rest), the two halves that slide apart, the slit with the next
word, and the two hairlines of the blade -->
<div class="rig" data-rig aria-hidden="true">
<div class="line line--whole" data-whole></div>
<div class="band band--top" data-band="top"><div class="track" data-track="top"></div></div>
<div class="band band--bottom" data-band="bottom"><div class="track" data-track="bottom"></div></div>
<div class="slit" data-slit><div class="line line--small" data-small></div></div>
<div class="blade blade--top" data-blade><i></i></div>
<div class="blade blade--bottom" data-blade><i></i></div>
</div>
<!-- an invisible copy of the word, to measure sizes and the baseline -->
<div class="line line--probe" data-probe 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.
16 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 word in the slit” from Animorio and fit it into my siteWhat it does
On ivory paper there is only a word, huge and black: SLOW. A very thin blue line crosses it from left to right at the middle of the capitals, like a blade. The two halves give a hair the other way, then the top half slides left and the bottom half right, moving apart vertically as they go: between them a horizontal slit opens, with the two blue lines on its edges. Inside, one letter after the other, a second word rises, DOWN, small, light, wide and spaced out, in the same blue. While it is read the halves keep sliding slowly. Then everything moves again: the halves of SLOW leave by the sides of the screen, the halves of a big DOWN arrive from the opposite sides, and the word in the slit grows, narrows, gains weight and loses its spacing until it is as big as they are; the halves close on it with a small bump, and DOWN is left, whole and black. The line runs off to the right and the next word waits for its cut: SLOW, DOWN, LOOK, AGAIN, and SLOW again.
How it works
The right cut
The cut runs through the middle of the capitals, not the middle of the line: the line has room above and below the letters. The cap height is read from a canvas (measureText of an H, actualBoundingBoxAscent), the baseline from an empty inline-block placed at the end of the word, which sits right on it. The cut is a whole number of pixels: so the two halves at rest leave no pale line between them.
Two windows, two tracks
The halves are two windows with overflow hidden on the same line: the top one from the edge to the cut, the bottom one from the cut down. In each a track slides with two copies: the word now in the middle and the next one off screen, to the right in the top track and to the left in the bottom one. Moving the top track left and the bottom one right by the same distance brings the new word to the middle, whole. At rest a single copy of the word shows, identical pixel for pixel.
The slit
Between the windows there is a third copy of the line, clipped with clip-path inset to the strip between the halves. Inside is the real next word, full size, shrunk with scale from the point of the cut: letter for letter it is the same as the halves, so when the scale is back to 1 it matches. The letters rise with a stagger computed by hand (expo.out for each), because the words change and a timeline built once cannot point at letters that do not exist yet.
One state, drawn every frame
The whole choreography moves four numbers: the slide (0 still, 1 open, 2 new word in the middle), the slit (0 closed, 1 open), the growth and the rise of the letters. A function on the GSAP ticker turns them into transform, clip-path, font-variation-settings and letter-spacing, and writes only what changes. The pixel sizes (how far to slide, how much to open) are measured again when the window changes, and the timeline never notices.
Measured springs
The slide uses expo.inOut, with a small anticipation backwards when the line finishes cutting. The slit opens and closes with a damped spring written as an easing function (BOUNCE sets the damping and the spring ends exactly on 1): opening, it passes its size by a few pixels; closing, the halves bump and overlap by a pixel before they stop. The small word grows with expo.inOut and meanwhile goes from width 112, weight 380 and 0.16 em spacing to the values of the big word.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
WORDS | script.js | ['Slow', 'down', 'look', 'again'] | The words, one after the other: each one waits in the slit and then becomes the big one. Short words of similar length read best. |
WEIGHT | script.js | 800 | The weight of the big word, from 100 (a hairline) to 900 (black). |
WIDTH | script.js | 75 | The width of the big word on the typeface's wdth axis: 62 very narrow, 125 wide. |
SMALL | script.js | 0.3 | How big the word in the slit is compared with the big one. The slit opens to match. |
SHIFT | script.js | 0.16 | How far the halves slide as the slit opens, as a share of the width of the word. |
BOUNCE | script.js | 0.35 | How far the slit overshoots as it opens and how hard the halves bump as they close: 0 they stop dead, 1 they bounce a lot. |
HOLD | script.js | 1.0 | How many seconds the slit stays open with the small word (the big word stays about half of that). |
SPEED | script.js | 1 | The speed of the whole animation: 2 is twice as fast, 0.5 half as fast. |
LOOP | script.js | true | Whether the first word comes back after the last and it all starts again. With false it stops on the last one. |
When to use it
For the opening of a site where a single word has to do all the work: a portfolio, a design studio, a magazine, a campaign or a product launch with a motto told in pieces. It works with a few short words read in a row (a sentence broken up, a studio's services, the names of a collection); the cut and the slit want a heavy, large typeface with plenty of room around it.
On phones
The same animation: the word is measured to fill almost the whole width of the screen, and the distances of the slide and the slit come from its size. Turning the phone measures everything again without stopping.
With reduced motion
No cut, no slide and no growth: the word stays still for a few seconds, fades out and the next one fades in in its place, and so on.
Pitfalls
- The cut goes through the middle of the capitals, not the middle of the line: the line has room above for accents and below for descenders, and at mid-line the cut would land in the wrong place. The right point is the baseline minus half the cap height.
- A cut on a half pixel blurs the edge of both halves, and at rest they would leave a pale line across the word. The cut is rounded to the pixel, and at rest a single copy of the word shows instead of the two halves.
- An inline-block span loses the kerning with the letter next to it, and the grown small word would no longer match the halves. The letter spans stay inline and rise with position relative and top, and every copy of the word (whole, halves and slit) is built the same way.
- The next word, on the track, has to stay off screen even when the halves have already slid to open the slit: its distance is half the screen plus the slide plus half the widest word, not just half the screen.
- The words change every round, so the tweens cannot point at the letters, which do not exist yet when the timeline is built: the timeline moves four numbers on an object and a function on the ticker draws them. That way a single timeline works for every word, and a window change measures the pixels again without touching it.
- Jumping to a point of the timeline with pause(time) does not fire the tl.call in between (GSAP suppresses events): looking at a distant frame, the word is still the old one. In the real demo the timeline plays through and the word always changes.
Libraries
GSAP 3.15.0, Archivo (font variabile, assi wght e wdth) 5.3.0.
Compressed with gzip, the three demo files weigh 6.3 KB; the libraries: GSAP 28 KB.
Testing
Tested on 14 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.
