Null JavaScript.

01 · Scroll-getriebene Animationen

Die Timeline ist der Scrollbalken.

Eine Animation muss nicht an der Uhr hängen. Mit animation-timeline: view() läuft sie genau so weit, wie das Element im Sichtfenster ist. Kein IntersectionObserver, kein Schwellwert, kein Skript.

Dein Browser kann view()-Timelines noch nicht. Die Karten stehen deshalb einfach da, und das Bild bleibt still.

Feature

animation-timeline: view() + animation-range

Ersetzt

IntersectionObserver mit Klassen-Umschaltung und alle Scroll-Bibliotheken, die dafür sonst im Bundle liegen. Das Parallax-Bild verschiebt sich über eine benannte view-timeline des Rahmens.

So sieht es aus

.card { animation: fly-in linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 40%; }

02 · Sticky-Stack

Karten, die sich stapeln.

Vier Abschnitte kleben per position: sticky oben fest. Jede Karte schrumpft und dunkelt ab, sobald die nächste hereinkommt. Was hier hereinkommt, weiß die Karte über die Timeline ihres Nachfolgers.

Ohne Scroll-Timelines stapeln sich die Karten trotzdem, sie schrumpfen nur nicht.

Feature

position: sticky + timeline-scope + view-timeline-name

Ersetzt

Einen Scroll-Handler, der für jede Karte die Position des Nachfolgers misst und daraus Transform-Werte rechnet.

So sieht es aus

.stack { timeline-scope: --c1, --c2, --c3, --c4 }
.card:nth-child(2) { view-timeline-name: --c2 }
.card:nth-child(1) { animation-timeline: --c2; animation-range: entry 0% entry 100% }

03 · Anchor Positioning & Popover

Tooltips, die wissen, wo ihr Knopf ist.

Ein Tooltip hängt an seinem Knopf wie an einem Anker. Passt er oben nicht mehr hin, klappt er nach unten. Das Popover öffnet sich mit dem popover-Attribut und schließt sich per Escape oder Klick daneben, eingebaut im Browser.

Dein Browser kann Anchor Positioning noch nicht. Die Tooltips sitzen deshalb klassisch absolut über dem Knopf, das Popover in der Bildschirmmitte.

Dein Browser kann @starting-style noch nicht, deshalb erscheinen Tooltip und Popover ohne Einblendung.

Feature

anchor-name / position-anchor / position-area / @starting-style

Ersetzt

Floating UI oder Popper, eigene Klick-außerhalb-Logik und einen Portal-Container für das Overlay.

So sieht es aus

.btn { anchor-name: --pop }
[popover] { position-anchor: --pop; position-area: bottom span-right; position-try-fallbacks: flip-block }
@starting-style { [popover]:popover-open { opacity: 0 } }

04 · Text & Container

Satz, der sich selbst setzt.

Überschriften auf dieser Seite sind mit text-wrap: balance gesetzt, Absätze mit pretty. Der Browser sucht den Umbruch, der keine einzelnen Wörter auf der letzten Zeile zurücklässt.

Dieser Absatz brennt sich Zeile für Zeile ein, während er durch das Sichtfenster wandert. Ein Verlauf, in Text geschnitten, gesteuert von einer Prozentzahl, die am Scrollbalken hängt.

Ohne Scroll-Timeline steht der Absatz oben komplett eingefärbt da.

Zieh die Karte breiter.

Unten rechts sitzt ein Griff (resize: horizontal). Ab 30rem Breite wechselt die Karte per Container-Query ins Zwei-Spalten-Layout. Auf Touch-Geräten gibt es den Griff nicht.

Feature

@container + resize + initial-letter + text-wrap

Ersetzt

ResizeObserver plus Klassen-Umschaltung, Float-Drop-Caps mit Pixelwerten und Widow-Vermeidung per Skript.

So sieht es aus

.box { container-type: inline-size; resize: horizontal; overflow: auto }
@container (min-width: 30rem) { .cq { grid-template-columns: 8rem 1fr } }
p::first-letter { initial-letter: 3 2 }