The menu that opens from its button
Menus, Transitions, Text
Free
All components
The tag field
A field where words become coloured tags: typed and confirmed, or chosen among the suggestions, the word flies from where it was into its place and the colour grows round it with a little overshoot, while the others move to make room; taken away, it shrinks and the others close the gap.
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 tag field</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/rethink-sans@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the tag field: words typed or chosen turn into coloured tags that grow around them, the others slide to make
room, a tag taken away shrinks and the rest close the gap -->
<div class="tags" data-tags data-autoclic>
<label class="tags__label" id="tags-label" for="tags-input">What are you into?</label>
<div class="tags__box">
<div class="tags__field" data-field>
<ul class="tags__list" aria-labelledby="tags-label" data-list></ul>
<input class="tags__input" id="tags-input" type="text" role="combobox" aria-expanded="false" aria-controls="tags-options" aria-autocomplete="list" aria-describedby="tags-hint" autocomplete="off" autocapitalize="words" autocorrect="off" spellcheck="false" enterkeyhint="done" placeholder="Add an interest" data-input>
</div>
<ul class="tags__options" id="tags-options" role="listbox" aria-label="Suggestions" hidden data-options></ul>
</div>
<p class="tags__hint" id="tags-hint" data-hint></p>
<p class="sr" aria-live="polite" data-live></p>
</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.
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 tag field” from Animorio and fit it into my siteWhat it does
On a white background the words What are you into?, a white field holding the tags Hiking, Wine tasting and Old towns, each in its soft colour with a small cross, and the box Add an interest; under it, Press Enter to add, up to 8. Typing, a list of suggestions opens under the field with the part typed in bold; with the arrows or the pointer one lights up. Enter, a comma or a click make it a tag: the words fly from the field or from the list into their place, the colour grows round them with a slight overshoot and the cross spins in, while the box moves further along. A word already there makes its tag shake and flash and the line under says so in red; with eight tags the whole field shakes. The cross takes a tag away: it shrinks and disappears, the others slide over to close the gap. In the empty field the first backspace outlines the last tag in its own colour, the second takes it away.
How it works
A real box
The field is a real input with role combobox, the suggestions a listbox (aria-activedescendant on the lit one), the tags a list, each with a Remove button, and an aria-live region says what was added or taken away.
The words that fly
A new tag goes at the end of the list; its words start from where they were (the start of the box, or the text of the suggestion chosen, measured with a Range) and fly into place in SLIDE + 0.1 seconds. The colour is a layer of its own that grows from the width of the words with back.out(POP), and the cross spins in.
The others make room
Before every change all the tags and the box are measured; after it, each one slides from its old place to the new one (power3.out, SLIDE seconds). A tag taken away leaves the flow (position absolute, where it was) and shrinks while the others close the gap.
No, thanks
A word already there shakes its tag (keyframes on x) and swells its colour, which comes back with elastic.out; with MAX tags the whole field shakes; the line under the field says why in red and a moment later goes back to what it was.
Keys and the preview
Enter or a comma confirm, the arrows go through the suggestions, Esc closes them, backspace in the empty field marks the last tag (outlined in its ink) and a second backspace takes it away. A click from a script (the library’s preview) chooses a suggestion, types a tag, types one already there, takes one away with its cross and one with backspace, without taking the focus.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
MAX | script.js | 8 | How many tags there can be. |
POP | script.js | 1.6 | How far a new tag’s colour overshoots as it grows. |
SLIDE | script.js | 0.45 | The seconds the tags take to slide to their new places. |
SUGGESTIONS | script.js | ['Hiking', 'Cycling', 'Wine tasting', …] | The words suggested while typing. |
START | script.js | ['Hiking', 'Wine tasting', 'Old towns'] | The tags when the page opens. |
When to use it
For the interests on a profile, the keywords of an article, the ingredients of a recipe, the people a message goes to, the filters of a search.
On phones
The field takes the width of the screen and the tags wrap; the box is 16 pixels, so Safari on iPhone does not zoom the page when it is tapped, autocorrect is off, so it does not change the words, and the keyboard shows its done key.
With reduced motion
The tags appear and disappear in their place, without flying or overshooting, the others move without sliding, the suggestions open without animation and nothing shakes: the line under the field still says what is wrong.
Pitfalls
- An element changing its place in the flow jumps: to make it slide, it is measured before and after the change and taken from the old place to the new one with a transform (the FLIP technique).
- A suggestion’s text is measured with a Range (selectNodeContents), not with its whole row: so the words start exactly from where they are read.
- Choosing a suggestion with the pointer would take the focus from the box before the click: the pointerdown on the list is stopped (preventDefault).
- A box under 16 pixels makes Safari on iPhone zoom the page when it is tapped.
Libraries
GSAP 3.15.0, Rethink Sans (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 6.7 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.
