The menu that opens from its button
Menus, Transitions, Text
Free
All components
The code that changes
A code block in steps: going from one step to another the words the two share fly from their old place to their new one, the new words come in where they belong and the ones no longer needed fade, while the lines that are new from end to end light up; the code really runs on a little box below, and Copy copies it and turns into a tick.
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 code that changes</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/red-hat-mono@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the code that changes: going to another step, the words the two steps share fly to their new places, the
new ones come in and the old ones fade; the code runs for real on the box below, and Copy turns into a tick -->
<section class="snippet" aria-label="Animate a box, step by step" data-snippet data-autoclic>
<header class="snippet__bar">
<div class="steps" role="tablist" aria-label="Steps" data-steps>
<span class="steps__pill" aria-hidden="true" data-pill></span>
</div>
<button class="copy" type="button" data-copy>
<svg class="copy__icon" viewBox="0 0 24 24" aria-hidden="true">
<g data-sheets><rect x="8.5" y="8.5" width="11.5" height="11.5" rx="2.6"/><path d="M15.5 8.5V6.2a2.6 2.6 0 0 0-2.6-2.6H6.2a2.6 2.6 0 0 0-2.6 2.6v6.7a2.6 2.6 0 0 0 2.6 2.6h2.3"/></g>
<path class="copy__tick" pathLength="1" d="M5 12.6l4.4 4.4L19 7.4" data-tick/>
</svg>
<span class="copy__label" data-copy-label><span>Copy</span></span>
</button>
</header>
<pre class="code" role="tabpanel" data-code-box><code data-code></code><span class="code__gone" aria-hidden="true" data-gone></span></pre>
<div class="result">
<span class="result__label">Result</span>
<div class="result__track"><span class="box" data-box></span></div>
<button class="run" type="button" aria-label="Run the code again" data-run>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M19 12a7 7 0 1 1-2.05-4.95M19.2 4.6v4.2H15"/></svg>
</button>
<p class="result__error" hidden data-error>This code does not run</p>
</div>
<p class="sr" aria-live="polite" data-live></p>
</section>
</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.
23 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 code that changes” from Animorio and fit it into my siteWhat it does
On a black background a dark code block: at the top three steps (Move, Spin, Chain) and Copy, in the middle the code coloured by what each word is (words of the language, functions, names before a colon, texts, figures, signs), at the bottom Result with a little orange box and a button to run it again. Choosing another step the pill slides under the name, the words the two steps share fly from their place to the new one, the new words come in from below where they belong and the ones no longer needed fade where they were; the block grows or shrinks with them and the lines that are new from end to end light up orange for a moment. Then the box goes back to the start and the step's code really runs: it slides across, spins with a bounce and at the end becomes a circle. Copy puts the code on the clipboard: the two sheets of the icon shrink and vanish, a tick draws itself and the word rolls to Copied, and after a while Copy comes back.
How it works
The code cut into words
A regex cuts the code into words: line breaks, spaces, texts in quotes, figures, names and signs. A name is a word of the language if it is in a list (const, let, function…), a function if a bracket follows, a property name if a colon follows. Each word becomes an inline-block span, each line a block of its own.
Finding the same words
Each span has a name: its text and how many times the same text came before (to#2 is the second to). Signs are named also with the word before them, because commas are everywhere and the comma after 1 must find the comma after 1.
The flight
Before changing, where each word stands is measured (offsetLeft and offsetTop), then the new code is written: the words found again start shifted by how far they were and come back to zero in MORPH seconds with power3.inOut; the new ones come in later with a little rise, the ones left without a place become copies in a layer above and fade. The block's height goes from the old one to the new one, and the lines that are wholly new light up.
The code that runs
Once the flight is over the box goes back to the start, loses the styles of before (clearProps) and the step's code really runs with new Function inside a gsap.context, which keeps hold of what it makes: the next run stops it with kill(). If the code has a mistake, This code does not run appears below.
Copy, the keys and the preview
Copy writes to the clipboard with navigator.clipboard, but only for a real click (isTrusted); if the browser says no it selects the code and the word becomes Selected. The icon is a timeline (sheets that shrink, a tick drawn with pathLength 1) and goes back after COPIED seconds. The steps are tabs (tablist) changed with the arrows, Home and End. A click from a script (the library's preview) goes to the next step and every third time presses Copy.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
STEPS | script.js | [['Move', "gsap.to('.box', {…});"], …] | The steps: the tab's name and its code, which also runs on the little box (which has the class box). |
MORPH | script.js | 0.7 | The seconds the code takes to turn into the next step's. |
COPIED | script.js | 1.6 | The seconds Copied stays before going back to Copy. |
When to use it
For the documentation of a library or an API, a step-by-step tutorial, a developer's blog, a page showing how to use a product, any code that changes a little at a time.
On phones
Under 480 pixels the code goes down to 13 pixels and fits the width; if a line were longer the block would scroll sideways without a bar. Taps do not wait for a double tap (touch-action manipulation).
With reduced motion
The code changes at once, without flights; the box goes straight to the end of the step's animation; Copy's icon and word change without moving, and no entrance.
Pitfalls
- A transform does not move an inline element: the words must be inline-block, and the spaces stay as text between them.
- Finding the words by their text alone, the commas swap lines and half the code lights up: signs have to be named together with the word before them.
- A change still in flight must be closed (progress(1)) before measuring, or the words are measured halfway.
- The clipboard accepts writing only from a real gesture and may refuse: for a click from a script only the tick is shown, and if the browser says no the code is selected.
- The running code must be closed before the next run: gsap.context keeps hold of what it makes and kill() stops it, then clearProps takes away the styles left behind.
Libraries
GSAP 3.15.0, Red Hat Mono (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 7.0 KB; the libraries: GSAP 28 KB.
Testing
Tested on 3 October 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: Done
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.
