Back to the library
Scroll — reveal at the threshold
Variant: Reveal at the threshold
The most-shipped scroll animation there is, and the two decisions that separate a good one from the default are both visible here. The threshold sits well above the bottom edge rather than on it: fire as an element touches the frame and the reveal plays while it is still half off-screen, so the reader watches the top of it finish arriving instead of finding it already there. And it latches — the page is thrown back down at the end and nothing re-runs, because a card that re-hides on the way up is telling the reader they have not read it yet. Every reveal is the same 420ms ease-out wherever it fires; the scroll decides when, and never how fast, since tying the reveal rate to the hand turns a slow drag into a smear. The two cards that were already above the fold still arrive 70ms apart, because reading order does not start at the fold.
scrollentrancestaggerlist
The source
A complete HTML document. Paste it into an empty .html file and it plays — no stylesheet, script, font, or image to fetch.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Scroll — reveal at the threshold</title>
<style>
:root {
/* Neutrals — fixed, never remixed. */
--ivory: #faf9f5;
--paper: #ffffff;
--oat: #e3dacc;
--slate: #141413;
/* Knobs — the remix API. A knob exists iff declared here and used below. */
--hue: 38.8;
--lift: 0;
--chroma: 1;
--round: 1;
--speed: 1;
/* Accents — derived from the knobs with the family's offsets baked in,
so one hue roll moves them together. Defaults reproduce the original hex. */
--clay: oklch(calc(0.6724 + var(--lift)) calc(0.1308 * var(--chroma)) var(--hue));
--clay-d: oklch(calc(0.5797 + var(--lift)) calc(0.127 * var(--chroma)) var(--hue));
--olive: oklch(
calc(0.6118 + var(--lift)) calc(0.0713 * var(--chroma)) calc(var(--hue) + 88.3)
);
--rust: oklch(
calc(0.5408 + var(--lift)) calc(0.1357 * var(--chroma)) calc(var(--hue) - 10.3)
);
/* Clock — every duration in the document runs off --t. */
--cycle: 6.4s;
--t: calc(var(--cycle) / var(--speed));
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
/* The flick. A scroll is thrown and then coasts against friction, so it
leaves at speed and decays — never an ease-in-out, whose slow start
would claim the hand pushed gently and then sped up. */
--ease-accent: cubic-bezier(0.14, 0.78, 0.28, 1);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
display: grid;
place-items: center;
background: var(--ivory);
font-family:
system-ui,
-apple-system,
'Segoe UI',
Roboto,
sans-serif;
color: var(--slate);
}
.rig {
width: min(184px, 84vw);
display: grid;
gap: 10px;
justify-items: center;
animation: rig-cycle var(--t) linear infinite;
}
.cap {
font-size: 11px;
letter-spacing: 0.04em;
color: color-mix(in srgb, var(--slate) 52%, transparent);
}
.foot {
opacity: 0;
animation: foot-in var(--t) linear infinite;
}
.frame {
position: relative;
width: 100%;
height: 148px;
overflow: hidden;
background: var(--paper);
border: 1.5px solid var(--oat);
border-radius: calc(12px * var(--round));
}
.page {
padding: 10px 11px 0;
display: grid;
gap: 9px;
animation: scroll var(--t) infinite;
}
/* 34px tall on a 43px pitch, so one flick is exactly one card and the
crossings land evenly however far the page has already travelled. */
.card {
height: 34px;
display: flex;
align-items: center;
gap: 9px;
padding: 0 9px;
border-radius: calc(9px * var(--round));
background: color-mix(in srgb, var(--slate) 4%, transparent);
opacity: 0;
transform: translateY(10px);
}
.dot {
flex: none;
width: 10px;
height: 10px;
border-radius: 50%;
background: color-mix(in srgb, var(--clay) 62%, transparent);
}
.bars {
display: grid;
gap: 5px;
flex: 1;
}
.bars i {
display: block;
height: 4px;
border-radius: 999px;
background: color-mix(in srgb, var(--slate) 15%, transparent);
}
.bars i:last-child {
width: 52%;
}
/* The threshold sits well above the bottom edge, not on it. A reveal that
fires as an element touches the frame plays while it is still half
off-screen, and the reader watches the top of it finish arriving. */
.rule {
position: absolute;
left: 0;
right: 0;
top: 88px;
border-top: 1px dashed color-mix(in srgb, var(--clay) 46%, transparent);
}
.rule::before {
content: '';
position: absolute;
left: 0;
top: -2.5px;
width: 4px;
height: 4px;
background: var(--clay);
}
.c0 {
animation: reveal-fold var(--t) infinite;
}
/* 70ms apart rather than a shared frame: two cards that were already above
the fold still arrive in reading order. */
.c1 {
animation: reveal-fold var(--t) infinite;
animation-delay: calc(0.07s / var(--speed));
}
.c2 {
animation: reveal-c2 var(--t) infinite;
}
.c3 {
animation: reveal-c3 var(--t) infinite;
}
.c4 {
animation: reveal-c4 var(--t) infinite;
}
/* Three flicks of one card each, then a longer throw back up the page.
The holds between them are most of the loop, because a scroll is a
handful of discrete shoves separated by reading. */
@keyframes scroll {
0%,
15% {
transform: translateY(0);
animation-timing-function: var(--ease-accent);
}
21.5%,
33% {
transform: translateY(-43px);
animation-timing-function: var(--ease-accent);
}
39.5%,
51% {
transform: translateY(-86px);
animation-timing-function: var(--ease-accent);
}
57.5%,
68% {
transform: translateY(-129px);
animation-timing-function: var(--ease-accent);
}
76%,
94% {
transform: translateY(-60px);
}
94.01%,
100% {
transform: translateY(0);
}
}
/* Every reveal is the same 420ms ease-out wherever it fires. The scroll
decides *when*; it does not get to decide *how fast* — tie the reveal's
rate to the hand and a slow drag turns it into a smear. */
@keyframes reveal-fold {
0%,
5% {
opacity: 0;
transform: translateY(10px);
animation-timing-function: var(--ease-out);
}
11.6%,
94% {
opacity: 1;
transform: translateY(0);
}
94.01%,
100% {
opacity: 0;
transform: translateY(10px);
}
}
@keyframes reveal-c2 {
0%,
15.5% {
opacity: 0;
transform: translateY(10px);
animation-timing-function: var(--ease-out);
}
22.1%,
94% {
opacity: 1;
transform: translateY(0);
}
94.01%,
100% {
opacity: 0;
transform: translateY(10px);
}
}
@keyframes reveal-c3 {
0%,
33.5% {
opacity: 0;
transform: translateY(10px);
animation-timing-function: var(--ease-out);
}
40.1%,
94% {
opacity: 1;
transform: translateY(0);
}
94.01%,
100% {
opacity: 0;
transform: translateY(10px);
}
}
@keyframes reveal-c4 {
0%,
51.5% {
opacity: 0;
transform: translateY(10px);
animation-timing-function: var(--ease-out);
}
58.1%,
94% {
opacity: 1;
transform: translateY(0);
}
94.01%,
100% {
opacity: 0;
transform: translateY(10px);
}
}
@keyframes foot-in {
0%,
78% {
opacity: 0;
animation-timing-function: var(--ease-out);
}
81%,
100% {
opacity: 1;
}
}
/* The page re-arms at 94%, inside the dark window, so nothing is ever seen
un-revealing itself on the way back to the top. */
@keyframes rig-cycle {
0% {
opacity: 0;
}
3.5%,
87% {
opacity: 1;
}
93%,
100% {
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
/* No travel and no rise: the page is parked mid-scroll with everything
already revealed, and the threshold is the only thing still moving —
which is the one mark in the piece that is not content. */
.rig,
.page {
animation: none;
}
.rig {
opacity: 1;
}
.page {
transform: translateY(-43px);
}
.card {
animation: none;
opacity: 1;
transform: none;
}
.foot {
animation: none;
opacity: 1;
}
.rule {
animation: rest-rule calc(var(--t) * 0.55) ease-in-out infinite;
}
@keyframes rest-rule {
0%,
100% {
opacity: 0.35;
}
50% {
opacity: 1;
}
}
}
</style>
</head>
<body>
<div
class="rig"
role="img"
aria-label="A page flicked upward three times; each card fades and rises into place as it crosses a threshold line above the bottom edge, and stays revealed when the page is scrolled back down"
>
<p class="cap">threshold · reveal · once</p>
<div class="frame">
<div class="page">
<div class="card c0">
<span class="dot"></span><span class="bars"><i></i><i></i></span>
</div>
<div class="card c1">
<span class="dot"></span><span class="bars"><i></i><i></i></span>
</div>
<div class="card c2">
<span class="dot"></span><span class="bars"><i></i><i></i></span>
</div>
<div class="card c3">
<span class="dot"></span><span class="bars"><i></i><i></i></span>
</div>
<div class="card c4">
<span class="dot"></span><span class="bars"><i></i><i></i></span>
</div>
</div>
<span class="rule"></span>
</div>
<p class="cap foot">back down re-runs nothing</p>
</div>
</body>
</html>
The variant family
Same idea, one axis moved. Compare them side by side before you commit.