The falling letter
Scroll, Text, Transitions
NewFree
Back to the library
Keep scrolling
At the end of the chapter you keep scrolling and a ring fills; when it is full the next chapter's card grows to full screen and lands as the picture of the new page.
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
Every chapter ends with the next chapter's card. At the end, if you keep scrolling the page no longer moves but a ring appears in the middle of the screen and fills clockwise, slowly, like a held breath; if you stop or scroll back it empties. When it is full, the card detaches, grows to full screen while its words leave upwards, and behind it the new chapter is born. Then the same image shrinks until it settles in the new page's picture, and the title rises out of its mask. The last chapter leads to the first: you never reach a footer.
How it works
When it arms
The accumulation starts only if the page is at the bottom and the next chapter's card is at least 22% visible. Every wheel move down adds deltaY × 0.8 (at most 64 per move) up to 1100; with a finger the movement counts two and a half times, up to 900. Wheel up subtracts.
A ring that follows
The shown value follows the accumulated one with a frame-rate independent brake: 1 − (1 − k) to the power of (dt × 120), with k 0.042 while filling and 0.16 while emptying. Idle for more than 0.9 seconds, it empties on its own.
Drawing the ring
An SVG circle with no fill and a dashed stroke: a single dash as long as the circumference. The stroke-dashoffset goes from the whole circumference (empty) to zero (full), and the circle is turned 180 degrees so it starts at nine o'clock. With mix-blend-mode difference it reads on any colour.
The flight
The card becomes fixed exactly where it is (a placeholder keeps its space) and goes full screen in 0.85 seconds on a cubic-bezier(0.5, 0.2, 0, 1). Behind it the new chapter is written and the page goes back to the top; the card then goes from full screen to the size of the new picture in 1.05 seconds, and when it lands the real picture takes its place.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
SOGLIA | script.js | 1100 (900 al tocco) | How many pixels of scrolling past the end it takes to move to the next chapter. |
RIEMPIE | script.js | 0.042 | How quickly the ring follows the scrolling. |
SVUOTA | script.js | 0.16 | How quickly it empties if you go back. |
ATTESA_SVUOTA | script.js | 900 | Idle milliseconds before the ring empties on its own. |
When to use it
For stories in chapters (a collection, a trip, the seasons) where each page leads to the next. Always keep the card clickable: nobody guesses the gesture past the end.
On phones
With a finger you accumulate by dragging up at the bottom of the page; the ring stays in the middle. Tapping the card starts the flight straight away.
With reduced motion
No ring and no flight: the card is an ordinary button and the new chapter arrives with a fade.
Pitfalls
- Stop the wheel (preventDefault on a non-passive listener) only when you are at the bottom and pushing down: elsewhere the page must scroll normally.
- Inside an iframe the wheel at the bottom would scroll the page that contains it: overscroll-behavior: contain on the demo's html.
- Before detaching the card, add a placeholder as tall as the card: without it the page suddenly gets shorter and the card starts from the wrong place.
- Measure the arrival picture after writing the new chapter and scrolling back to the top, not before.
Libraries
GSAP 3.15.0, CustomEase (GSAP) 3.15.0, Mona Sans (font variabile) 5.3.0.
Weight: 17 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.
