Words between brackets

Scroll, TextGSAPEasyCompressed weight: Demo 4.1 KBGSAP + ScrollTrigger 45 KBFreeDownload the zip

Scroll inside the preview

A studio’s services as a column of huge words scrolling through two brackets fixed in the middle of the screen: the word between them is sharp and wider, the others blurred. While you scroll the brackets open, pushed by every movement, and as soon as you stop they close again on the 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.

Download the zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Words between brackets</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/saira@5.3.0/wdth.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/jetbrains-mono@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- the services of a small sound studio: as you scroll, a column of huge words slides up through a pair of
       brackets; the word inside is sharp and wide, the others blurred, and the brackets open while you scroll and
       close again when you stop -->
  <header class="apertura">
    <p class="apertura__marchio">Low Tide Audio</p>
    <h1 class="apertura__titolo">What we do</h1>
    <p class="apertura__sotto">Sound for films, games and records, from one small room by the sea.</p>
  </header>

  <section class="servizi" data-servizi>
    <div class="palco">
      <div class="palco__testo">
        <p>Five ways to work with us.</p>
        <p>Book one, or the whole week.</p>
      </div>
      <div class="lista" data-lista>
        <div class="parentesi" aria-hidden="true">
          <svg class="parentesi__sx" data-sx viewBox="0 0 40 160"><path d="M34 6H8V154H34"/></svg>
          <svg class="parentesi__dx" data-dx viewBox="0 0 40 160"><path d="M6 6H32V154H6"/></svg>
        </div>
        <ul class="colonna" data-colonna>
          <li class="parola" data-parola>Mixing</li>
          <li class="parola" data-parola>Mastering</li>
          <li class="parola" data-parola>Foley</li>
          <li class="parola" data-parola>Scoring</li>
          <li class="parola" data-parola>Sessions</li>
        </ul>
      </div>
    </div>
  </section>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.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.

23 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 “Words between brackets” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

The services page of a made-up sound studio, Low Tide Audio, on warm paper: a big title, «What we do», and under it a section that stays put while the page scrolls. There five words in capitals, narrow and heavy, Mixing, Mastering, Foley, Scoring and Sessions, rise one after the other through two orange square brackets fixed in the middle. The word between the brackets is sharp, black and widens a little; the others are blurred and lighter, and the change from one to the next is soft. Every time you scroll the brackets open outwards, and a moment after you stop they close again on the word of the moment.

How it works

The still stage

The section is three and a half screens tall and holds a sticky stage as tall as the screen: the page scrolls, the stage stays, and the column of words is the only thing that moves.

The column

ScrollTrigger ties to the scroll, from TRAIL[0] to TRAIL[1], a tween that takes the column from half a word below the centre to all the words but half above it. So word k sits in the middle of the brackets when the progress is (k + 0.5) / 5, half way through its fifth of the trip.

The word inside

The word between the brackets is the progress times five, rounded down. It gets a blur of BLUR[0] pixels and the others BLUR[1], with a 0.55-second CSS transition on the curve 0.33, 1, 0.68, 1; in the same transition it widens, because the typeface has a width axis and font-stretch goes from 62 to 78%.

The brackets

Every scroll event, while the section is on screen, sends the brackets outwards by SPREAD hundredths of the width with an OPEN-second tween. The frame loop checks when the last scroll came: after IDLE milliseconds it closes them with a CLOSE-second tween.

Timing the wait

The wait before closing is counted in the frame loop rather than with a timer: that way it follows the same clock as the animations, even when the site’s workbench slows the preview down or stops it.

Values to change

Name	File	Default	What it changes
`TRAIL`	script.js	`['top top', 'bottom bottom']`	Where the column starts and stops moving: a point of the section meets a point of the screen.
`BLUR`	script.js	`[0, 10]`	The blur of the word in the brackets and of the others, in pixels (2 and 10 on the site).
`SPREAD`	script.js	`[1.6, 4.2]`	How far each bracket opens while scrolling, in hundredths of the width, on a computer and on a phone (the site’s).
`OPEN`	script.js	`0.35`	The seconds for the brackets to open (as on the site).
`CLOSE`	script.js	`0.45`	The seconds for them to close (as on the site).
`IDLE`	script.js	`140`	The milliseconds without scrolling before they close (as on the site).

Try them in the Playground

When to use it

For a short list of services, chapters or values worth reading one item at a time: the scroll leafs through it, and the brackets make the page feel like it responds.

On phones

The same, with the words bigger compared to the screen and the brackets opening wider, 4.2 hundredths of the width.

With reduced motion

The column stands still with all the words in view: as you scroll, the brackets jump to the word of the moment without moving, and only sharpness and colour change, as a fade.

Pitfalls

The word inside has to be worked out from the progress, not from the position on screen: with the column moving every frame, measuring where each word is costs time and lags a frame behind.
A typeface that loads later changes the height of the words: ScrollTrigger has to measure again once the fonts are in, otherwise the words stop outside the brackets.
The brackets are moved by GSAP: they must not have a transform written in the CSS, which GSAP would wipe.

Libraries

GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Saira (font variabile, asse della larghezza) 5.3.0, JetBrains Mono (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 4.1 KB; the libraries: GSAP + ScrollTrigger 45 KB.

Testing

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