Marquee that speeds up with scroll
Scroll, Text, Hover
Free
Back to the library
The word riffled with the thumb
A minimal-style hover effect on a headline: every letter is a small pad of leaves bound on the left. As the pointer or a finger passes, the leaves of the nearby letters fan open like pages riffled with the thumb, showing the same letter in different weights, then fall back on a spring and the letter keeps the weight of the next leaf.
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 word riffled with the thumb</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="pagina" data-pagina>
<header class="testa">
<p class="marchio">Spine</p>
<p class="nota">Hand bindery, since 1987</p>
</header>
<section class="palco" data-palco aria-label="The word riffle: pass over it to riffle its pages">
<h1 class="parola" data-parola aria-label="riffle">riffle</h1>
<div class="riga" aria-hidden="true">
<span class="tacca tacca--sx"></span>
<span class="filo" data-filo></span>
<span class="tacca tacca--dx"></span>
</div>
<p class="conta" aria-hidden="true"><span>Pages turned</span> <b data-conta>0</b></p>
</section>
<footer class="piede">
<p>Pass over the word, or drag across it</p>
</footer>
</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 word riffled with the thumb” from Animorio and fit it into my siteWhat it does
On a warm white page, for the made-up bindery Spine, there is a single word, ‘riffle’, in a variable serif, with a thin line and two ticks underneath. Every letter is made of five leaves on top of each other, bound on the left side. When the pointer (or a finger) passes over the word, the leaves of the nearby letters lift in perspective, turning on their spine: the top one lifts the most, those below less and less, and you see the fan of the same letters in different weights, paler; on the opening spine a vermilion thread lights up, and the line underneath rises by a pixel. Once the thumb has passed, the leaves fall back on a spring, go a degree too far and settle; the next leaf is now on top, and the letter takes the new weight with a small squash. Going back and forth the word changes weight letter by letter, and a counter at the bottom counts the pages turned. When nobody moves the pointer, a fake one passes back and forth over the word.
How it works
Letters made of leaves
The script splits the word into letters. Each letter has an invisible span set in the heaviest weight, which gives it its width so nothing moves when the weight changes, and on top five absolutely placed leaves with the same letter, the perspective on the left side and the transform-origin on the spine.
How much the thumb touches a letter
On every frame the pointer's distance from the middle of each letter is measured, in letter widths, and also from the height of the word; a soft curve (smoothstep) turns it into a number from 0 to 1, which follows the pointer with a small lag.
The fan on a spring
Each leaf has its own angle and speed: the target is the opening times an angle that goes down from the top leaf to the bottom one, and a spring with stiffness and damping pulls the angle towards the target, so the leaves go a degree too far and settle. The leaves underneath only show while the letter is open.
The page turned
When a letter has been more than half open and comes back almost closed, it counts as a page turned: the next leaf goes on top, GSAP takes the weight to the new value with an elastic ease, the letter squashes by a hair and the counter goes up.
The fake thumb
If the real pointer has not moved for more than 2.4 seconds, a looping timeline takes a fake thumb from one end of the word to the other and back, with a pause at the ends; as soon as the real pointer moves the timeline stops.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
WORD | script.js | 'riffle' | The word to riffle (up to 10 letters). |
LEAVES | script.js | 5 | How many leaves each letter has (at most as many as the weights). |
SPREAD | script.js | 74 | How many degrees the top leaf of the fan lifts. |
REACH | script.js | 1.15 | How far the thumb reaches, in letter widths. |
SPRING | script.js | [210, 15] | The leaves' spring: how stiff and how damped it is. |
WEIGHTS | script.js | [280, 380, 480, 580, 680] | The leaves' weights, one after the other (Fraunces goes from 100 to 900). |
UNDER | script.js | 0.42 | How visible the leaves underneath are when the fan is open. |
When to use it
For the headline or wordmark of a site that has to do with paper and books: a bindery, a publisher, a bookshop, a magazine, a reading blog, an illustrator's portfolio; also for a list of large words in a menu.
On phones
The same animation with the sizes adapted: the word fits the width of the screen and the height of the box. You riffle it by dragging a finger across the word; when the finger lifts the leaves fall back.
With reduced motion
Nothing turns: passing over a letter only changes its weight, with a fade.
Pitfalls
- With the width taken from the current weight the neighbouring letters moved at every weight change: each letter has an invisible span set in the heaviest weight that keeps its place.
- The fake thumb has to be worked out from the width of the word measured again on every frame, because the demo window changes size while you look at it.
- The counter only goes up if the letter was really opened (more than half): without that threshold brushing it was enough to turn a page.
Libraries
GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Archivo (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 4.7 KB; the libraries: GSAP 28 KB.
Testing
Tested on 22 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.
