Words that melt into each other
Text, Scroll, SVG
NewFree
Back to the library
The colour chapters
A page in chapters with a pinned panel that changes colour as you scroll and writes each chapter’s mark with a brush, while beside it the moments scroll by, the drawings slightly slower than the text.
The code
A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN.
The code for this animation is part of lifetime access.
The preview stays open: watch it, slow it down, try it on your phone.
Lifetime accessWhat it does
A day in the kitchen garden in four chapters: dawn, noon, sunset and night. On the right a panel as tall as the screen stays still: at the start of each chapter a mark is written on it with a brush (a rising sun, a full sun, a setting sun, the moon) and below appear the name and a sentence; at the end of the chapter the mark erases itself in the same direction it was written, and the panel’s colour moves to the next: peach, linen, coral, indigo. At night the text turns light. On the left the moments of the day scroll by, drawn: the basket of courgettes, the watering can, the hat, the tomatoes, the lantern, the sleeping dog. Each drawing scrolls slightly slower than its caption, and rises into place the first time it passes.
How it works
A still panel without a pin
The page is a two-column grid and the panel is the right-hand element, with position: sticky, top 0, a height equal to the screen and align-self: start. It stays still while the column of moments scrolls beside it, with no spacer and no recalculation.
Writing and erasing in the same direction
Each mark is a calligraphic outline uncovered by a mask, a wide line with pathLength 1. To write it the stroke-dashoffset goes from 1.02 to 0; to erase it, it does not go back but carries on to −1.02: the visible stroke slides past the end of the line, and the mark disappears from its start, like a trace drying.
One timeline per chapter
Each chapter has its own timeline of length 1, tied to scrolling from when its top passes 70% of the screen to when its bottom does: between 0 and 0.3 it writes the mark, at 0.06 it brings in the text, between 0.8 and 1 it erases both. The colour instead changes in a separate tween, while the chapter’s top goes from 72% to 38% of the screen.
Two speeds
Inside each frame the drawing is enlarged 1.2 times and moves from yPercent 9 to −9 while the moment crosses the screen; the caption below moves about twenty pixels the other way. On phones the panel disappears and in its place a fixed bar slides down with the colour, the small mark and the chapter name, which changes with a small jump.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
CAPITOLI | script.js | 4 capitoli | For each chapter: name, panel colour, text colour and mark (a line in 200 × 200 and the brush width). |
DISEGNI | script.js | 8 disegni | The moments’ drawings, in SVG 200 × 150: they can be replaced by photographs in the same frame. |
min-height del capitolo | style.css | 150% dello schermo | How long a chapter lasts: taller, more scrolling for each colour. |
When to use it
To tell a day, a process, the seasons or a product’s lines, when each step has its own colour and a mark to remember.
On phones
A single column; the panel gives way to a fixed bar at the top that slides down when the chapters begin and changes colour, mark and name at every chapter.
With reduced motion
The marks are not written and the drawings do not scroll at different speeds: at every chapter the panel changes colour, mark and text with a two-tenths fade.
Pitfalls
- A sticky element inside a grid needs align-self: start, or the cell stretches to the row’s height and the element has no room to stay still.
- When several ScrollTriggers animate the same colour, use fromTo with written start and end colours and immediateRender: false: that way the order in which they update does not matter.
- To erase a stroke in the same direction it was written, take the stroke-dashoffset into negative values, do not bring it back to 1; and the dasharray must be «1 3», not «1 1», or at −1.02 and 1.02 a sliver of the next dash shows.
- The drawing moving inside its frame must be larger than the frame, or its edges show.
Libraries
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Weight: 24 KB of our own files.
Testing
Tested on 27 September 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.
