Jeder Effekt auf einer Seite kostet etwas: Stunden beim Bauen, eine Bibliothek, die mitgeladen wird, Rechenzeit je Bild und eine zweite Fassung für alle, die Bewegung abgeschaltet haben. Die meisten Listen mit Animationsideen lassen diese Seite weg. Dieser Beitrag bewertet die Effekte, die in fast jedem Briefing vorkommen, auf zwei Skalen von 1 bis 5, Aufwand und Wirkung, und sortiert sie in vier Gruppen: die, die sich fast überall lohnen, die Schaustücke, die man sich einmal pro Seite leistet, die Grundlagen, die man mitnimmt, wenn sie nichts kosten, und die, die mehr kosten, als sie bringen.
- Aufwand und Wirkung getrennt bewerten, beides von 1 bis 5. Ein Effekt wird gebaut, wenn die Wirkung mindestens zwei Punkte über dem Aufwand liegt, oder wenn er das eine Schaustück der Seite ist.
- Den besten Ertrag bringen vier Effekte: gestaffelte Auftritte, Hover-Zustände mit Zweck, Einblendungen beim Scrollen unter 0,7 Sekunden und eine Zahl, die hochzählt. Zusammen kosten sie etwa einen Tag und tragen das meiste von dem, was eine Seite fertig wirken lässt.
- Eine Seite verträgt ein Schaustück. Eine gescrubbte Bildsequenz, ein angepinntes Querkapitel und ein Wort, das sich zu einem Foto öffnet, konkurrieren um dieselbe Aufmerksamkeit. Zwei davon heben sich gegenseitig auf.
- Effekte, die den Rahmen statt den Inhalt bewegen, sitzen in der Ecke mit wenig Ertrag: magnetische Buttons, eigene Cursor, Partikelhintergründe, Preloader. Auf Touch-Geräten, und das ist mehr als die Hälfte der Besuche, tun sie nichts, und die Fassung für reduzierte Bewegung brauchen sie trotzdem.
Wie entscheidet man, ob ein Effekt gebaut wird?
Zwei Dinge getrennt bewerten und erst danach vergleichen: was der Effekt kostet und was er für den Leser tut. Beides von 1 bis 5. Die meisten Streitgespräche über Animation gehen schief, weil die eine Seite über Kosten redet und die andere über Gefühl, und keine der beiden Zahlen auf dem Tisch liegt.
Der Aufwand zählt alles, nicht nur den ersten Bau. Eine 1 ist unter einer Stunde und nur CSS. Eine 3 ist ein Tag, eine Bibliothek und ein zweiter Zustand für Touch und für reduzierte Bewegung. Eine 5 sind mehr als zwei Tage, eine Canvas- oder WebGL-Ebene, eigene Physik oder eine Bildsequenz, die produziert werden muss, und eine Prüfung bei jeder Änderung am Inhalt.
Die Wirkung stellt drei Fragen. Erklärt der Effekt den Aufbau der Seite, etwa welche Elemente zusammengehören oder wo ein Kapitel beginnt? Lässt er die Seite fertig wirken? Bringt er jemanden näher an das, wofür die Seite da ist? Eine 1 heißt, niemand würde es merken, wenn er fehlt. Eine 5 heißt, Leute beschreiben die Seite hinterher damit.
Gegeneinander aufgetragen ergeben die beiden Zahlen vier Gruppen. Wenig Aufwand und viel Wirkung ist der Sweet Spot, und alles darin kommt auf jede Seite. Viel Aufwand und viel Wirkung ist das Schaustück, eines pro Seite. Wenig Aufwand und wenig Wirkung sind die Grundlagen, die von selbst mitkommen, sobald der Sweet Spot steht. Viel Aufwand und wenig Wirkung ist die Ecke, die man in Ruhe lässt, so gut die Demo auch aussieht.
Ein Effekt, bei dem man nicht in einem Satz sagen kann, was er dem Leser erklärt, gehört in die Ecke mit wenig Ertrag, egal wie er aussieht.
Welche Effekte sind der Sweet Spot?
Vier Effekte mit Aufwand 1 oder 2 und Wirkung 4: der gestaffelte Auftritt, Hover-Zustände, die sagen, was passieren wird, eine Einblendung, sobald ein Abschnitt ins Bild kommt, und eine Zahl, die hochzählt. Zusammen kosten sie etwa einen Tag und tragen das meiste von dem, was eine Seite fertig wirken lässt.
Was sie gemeinsam haben: Jeder hängt an Inhalt, den der Leser ohnehin ansieht, und jeder ist vorbei, bevor der Leser darauf warten müsste. Das ist der ganze Trick. Bewegung, die mit dem Inhalt ankommt, liest sich als Sorgfalt. Bewegung, auf die der Inhalt wartet, liest sich als Verzögerung.
- Gestaffelter Auftritt (Aufwand 1, Wirkung 4). Karten, Listeneinträge oder Menüpunkte erscheinen nacheinander, 50 bis 80 Millisekunden versetzt, jeder in 0,4 bis 0,6 Sekunden aus 12 bis 20 Pixeln Tiefe eingeblendet. Das sagt dem Leser, was zusammengehört. Bei sechs Elementen ist Schluss: danach kommt das letzte 400 Millisekunden zu spät, und die Gruppe zerfällt.
- Hover mit Zweck (1, 4). Eine Karte hebt sich um 2 bis 4 Pixel, ein Pfeil rückt 4 Pixel nach rechts, eine Unterstreichung zeichnet sich von links, alles in 150 bis 250 Millisekunden. Jeder dieser Zustände beantwortet, was beim Klick passiert. Unter 100 Millisekunden flackert es, über 300 hinkt es dem Zeiger hinterher.
- Einblendung beim Scrollen (2, 4). Ein Abschnitt blendet ein und rückt 16 bis 24 Pixel nach oben, sobald 20 bis 30 Prozent davon im Bild sind, in 0,5 bis 0,7 Sekunden, einmal. Eine Regel für die ganze Seite. Nie auf dem Hero: Der erste Bildschirm steht, bevor ein Skript läuft.
- Zahl, die hochzählt (2, 4). Eine Kennzahl läuft in etwa 1,2 Sekunden mit Ease-out von 0 auf ihren Wert, einmal, sobald sie ins Bild kommt. Sie zieht den Blick auf die eine Zahl, um die es im Abschnitt geht. Das trägt bei Jahren, Kunden und Prozent, nicht bei Preisen: Die will man lesen, nicht ansehen.
- Höhe bei Akkordeons und Menüs (2, 3). Öffnen in 250 bis 350 Millisekunden statt als Sprung. Mit grid-template-rows von 0fr auf 1fr geht das ohne Skript. Niemand lobt es, jeder merkt, wenn es fehlt.
- Laufband (1, 3). Eine Reihe aus Logos oder Wörtern, die mit 20 bis 40 Pixeln pro Sekunde läuft und beim Hover anhält. Füllt einen schmalen Streifen mit Leben, für den Preis eines Keyframes.
Sechs Effekte, und eine Regel dazu: eine Dauer für Auftritte, eine für Hover und eine Kurve für die ganze Seite. Den meisten Seiten, die unfertig wirken, fehlen keine Effekte. Sie haben fünf Dauern.
const enter = { hidden: { opacity: 0, y: 16 }, shown: { opacity: 1, y: 0 },};const group = { shown: { transition: { staggerChildren: 0.06 } },}; // one duration, one curve, for every entrance on the page const ease = { duration: 0.5, ease: [0.22, 1, 0.36, 1] };
Drei Kurven decken den Alltag ab.
Eine Seite mit drei Kurven wirkt geordnet, eine mit zwölf wirkt zufällig. Diese drei reichen fast immer.
Welche Effekte sind Schaustücke, und wie viele verträgt eine Seite?
Eines. Ein Schaustück ist ein Effekt mit Aufwand 4 oder 5 und Wirkung 4 oder 5, und es verdient seine Kosten nur dort, wo die Aufmerksamkeit des Lesers ohnehin liegt: im ersten Bildschirm oder an einem Kapitelwechsel in der Mitte einer langen Seite.
Die Kandidaten: eine Bildsequenz, die am Scrollen hängt, ein Wort, das sich zu einem Foto öffnet und auf die ganze Bühne wächst, ein angepinntes Querkapitel, Text, der sich Zeile für Zeile beim Scrollen füllt, eine Verzerrung im Bild, die dem Zeiger folgt. Jedes davon kostet ein bis drei Tage, die meisten brauchen eine Bibliothek für Scroll-Zeitleisten, und jedes braucht einen Stillstand für reduzierte Bewegung und einen Ersatz für Touch.
Zwei davon auf einer Seite heben sich gegenseitig auf. Der Leser hat einen Platz im Gedächtnis für das, was diese Seite gemacht hat, und zwei Schaustücke streiten sich darum. Das zweite kommt außerdem, nachdem das erste die Geduld fürs Warten aufgebraucht hat.
- Gescrubbte Bildsequenz (5, 5). 120 bis 200 Bilder mit 1600 Pixeln Breite kommen als JPEG oder WebP auf 8 bis 15 Megabyte. Vor dem Abschnitt vorladen, in ein Canvas zeichnen und im Scrub auf 24 Bilder pro Sekunde begrenzen, mehr liest sich nicht flüssiger. Auf dem Handy ein zweiter Satz mit 800 Pixeln.
- Wort, das sich zu einem Foto öffnet (4, 5). In einer Überschrift öffnet sich eine Lücke, Bilder schneiden hindurch, das letzte wächst auf den ganzen Bildschirm. Eine gescrubbte Zeitleiste mit acht Schritten, etwa 400 Prozent der Fensterhöhe als Strecke, und gemessene statt gerechnete Positionen, weil die beiden Hälften eines Wortes nie gleich breit sind.
- Angepinntes Querkapitel (4, 4). Eine Reihe Tafeln, die seitwärts läuft, während die Seite stehen bleibt. Braucht 300 bis 400 Prozent der Fensterhöhe als Strecke und auf dem Handy ein schlichtes Untereinander, weil Querscrollen dort gegen den Browser arbeitet.
- Text, der sich beim Scrollen füllt (3, 4). Ein Absatz in 20 Prozent Grau, der Wort für Wort schwarz wird, an die Scrollposition gebunden. Stark für ein Manifest oder eine Behauptung, ermüdend ab 40 Wörtern.
- Verzerrung, die dem Zeiger folgt (5, 3). Braucht WebGL und einen Shader, rund 150 Kilobyte Bibliothek, und auf Touch passiert nichts. In der Demo beeindruckend, auf einer Seite, die in unter drei Sekunden laden soll, selten den Bau wert.
Welche Effekte kosten mehr, als sie bringen?
Die, die den Rahmen statt den Inhalt bewegen. Ein magnetischer Button, ein eigener Cursor, Partikel hinter dem Hero, ein animierter Farbverlauf, ein Preloader, ein Schreibmaschineneffekt auf der Überschrift, Parallaxe auf jedem Bild. Sie teilen drei Eigenschaften: Sie brauchen einen Zeiger, sie laufen, ob jemand hinsieht oder nicht, und sie erklären nichts über die Seite.
Touch ist das erste Problem. Auf Handys und Tablets gibt es kein Hover und keinen Cursor, also sind magnetische Buttons, eigene Cursor und alles, was dem Zeiger folgt, für mehr als die Hälfte der Besuche unsichtbar. Was bleibt, sind der Code, das Bundle und der Zweig für reduzierte Bewegung.
Warten ist das zweite. Ein Schreibmaschineneffekt mit 50 Millisekunden je Zeichen braucht für eine Überschrift mit 40 Zeichen zwei Sekunden, und der Leser sitzt sie ab. Ein Preloader legt ein bis drei Sekunden vor das erste Bild, auf einer Seite, die sonst bei 0,8 lesbar gewesen wäre. Beides sieht im Showreel nach Politur aus und im Browser nach Verzögerung.
Kosten je Bild sind das dritte. Ein Partikel-Canvas oder ein animierter Weichzeichner hält den Hauptthread mit 60 Bildern pro Sekunde beschäftigt, solange der Tab offen ist, und das zeigt sich als warmes Handy und kürzerer Akku. Ein Bild hat 16,7 Millisekunden. Ein backdrop-filter mit 20 Pixeln über die volle Breite nimmt davon auf einem mittleren Handy mehrere, bevor irgendetwas anderes gelaufen ist.
Nichts davon ist ein Verbot. Ein Zeiger-Begleiter in einer Galerie, ein Partikelfeld hinter einem dunklen Kapitel einer Produktseite, ein Preloader auf einer Seite, deren ganzer Zweck eine Szene mit vier Megabyte ist: Jedes davon kann richtig sein. Die Bewertung sagt, was es kostet, und dass die Antwort im Zweifel Nein lautet.
- Ein magnetischer Button, der dem Zeiger im Umkreis von 80 Pixeln folgt. Auf Touch ist er ein Button.
- Ein eigener Cursor, der den Pfeil durch einen Kreis mit 40 Pixeln ersetzt. Er versteckt den Zeiger, den alle kennen, und auf Touch tut er nichts.
- Ein Schreibmaschineneffekt auf der Überschrift, 50 Millisekunden je Zeichen. Der Leser wartet zwei Sekunden darauf, worum es geht.
- Parallaxe auf jedem Bild, jedes in anderer Geschwindigkeit. Die Seite schwimmt, und nichts ist verankert.
- Ein Button, dessen Pfeil beim Hover 4 Pixel wandert und dessen Beschriftung sich 1 Pixel hebt. Dasselbe Gefühl, und auf Touch ein normaler Button.
- Der Zeiger bleibt. Wo ein Element einen Hinweis braucht, reicht cursor: grab oder ein kleines Etikett, das nur dort mitläuft.
- Die Überschrift steht vom ersten Bild an. Wenn etwas tippen soll, dann ein Wort am Ende, nicht der Satz.
- Parallaxe auf einem Bild je Bildschirm, höchstens 10 bis 15 Prozent der Scrollstrecke, und nur auf dem Desktop.
Was kostet ein Effekt wirklich?
Etwa ein Drittel davon ist der Bau. Der Rest ist die Bibliothek, die er mitbringt, die Bilder, die er rechnet, die Fassung für alle, die Bewegung abgeschaltet haben, und jede spätere Änderung an dem Inhalt, an dem er hängt.
Zuerst die Bibliotheken, weil sie am leichtesten zu zählen sind. framer-motion hat als Ganzes etwa 34 Kilobyte gzip, mit LazyMotion und dem Funktionsumfang domAnimation oder domMax 15 oder 25. GSAP im Kern etwa 23 Kilobyte, ScrollTrigger legt 13 dazu. Eine WebGL-Ebene mit Three.js beginnt bei 150. Reines CSS kostet 0, und Scroll-Animationen in CSS laufen heute in Chrome, Edge und Safari, in Firefox noch nicht standardmäßig. Zahlen gerundet, Stand September 2026.
Dann die Bilder je Sekunde. Nur transform und opacity laufen auf dem Compositor ohne Layoutarbeit. Wer width, height, top, left oder einen Schatten animiert, zwingt den Browser bei jedem Bild zu einer neuen Layoutrechnung, und auf einem Handy ist das der Unterschied zwischen 60 Bildern pro Sekunde und 20. Weichzeichner und backdrop-filter sind ebenfalls Compositor-Arbeit, aber teure: auf kleine Flächen begrenzen und den Radius nie animieren.
Dann der Stillstand. prefers-reduced-motion ist eine Systemeinstellung, die ein nennenswerter Teil der Leute eingeschaltet hat, und der Effekt braucht darauf eine Antwort, die keine leere Fläche ist. Einblendungen dürfen bleiben. Weg, Parallaxe, Autoplay und alles, was am Scrollen hängt, fallen weg, und der Endzustand steht stattdessen da. Diesen Zweig bekommt jeder Effekt, den man bewertet, also gehören seine Kosten von Anfang an in die Aufwandszahl.
Zuletzt die Inhaltsänderung. Ein Schaustück ist für eine Überschrift, ein Bild, eine Zahl gebaut. Ändert der Kunde das Wort, das sich zu einem Foto öffnet, misst jemand neu. Deshalb ist ein Schaustück im Aufwand eine 4 oder 5, auch wenn der erste Bau einen Tag gedauert hat.
Dieselbe Einblendung mit 0,3, 0,6 und 1,2 Sekunden. Unter 0,3 sieht man nichts, über 0,8 wartet man auf etwas.
Wo landen gängige Effekte in der Matrix?
Sechsunddreißig Effekte mit ihrer Bewertung, vom Sweet Spot bis zur Ecke mit wenig Ertrag. Die erste Zahl ist der Aufwand, die zweite die Wirkung. Sie gelten für eine Marketing- oder Portfolioseite mit normalem Budget. Eine Produktdemo oder ein Spiel verschiebt einige davon.
- Gestaffelter Auftritt (1, 4). Sweet Spot. Erklärt, was zusammengehört, für eine Zeile Konfiguration.
- Karte hebt sich beim Hover (1, 4). Sweet Spot. 2 bis 4 Pixel, 200 Millisekunden, und die Karte sagt, dass sie klickbar ist.
- Unterstreichung zeichnet sich (1, 3). Sweet Spot. Ein Pseudoelement mit scaleX von 0 auf 1.
- Pfeil rückt beim Hover (1, 3). Sweet Spot. 4 Pixel Weg genügen, mehr wirkt nervös.
- Einblendung beim Scrollen (2, 4). Sweet Spot. Einmal je Abschnitt, nie auf dem ersten Bildschirm.
- Zahl, die hochzählt (2, 4). Sweet Spot. Für Kennzahlen, nicht für Preise.
- Tab-Markierung, die gleitet (2, 4). Sweet Spot. Zeigt den Weg von einem Zustand zum nächsten.
- Bild öffnet sich per clip-path (2, 4). Sweet Spot. Ein Keyframe, läuft auf dem Compositor.
- Höhe bei Akkordeons (2, 3). Sweet Spot. grid-template-rows von 0fr auf 1fr, ohne Skript.
- Laufband (1, 3). Sweet Spot. 20 bis 40 Pixel pro Sekunde, Pause beim Hover.
- Bild wächst leicht beim Scrollen (2, 3). Sweet Spot. 5 bis 10 Prozent, mehr lässt das Bild schwimmen.
- Kopfzeile, die beim Scrollen schrumpft (2, 3). Sweet Spot. Gibt der Seite oben Platz zurück, ohne die Navigation zu verlieren.
- Seitenwechsel als Überblendung (2, 3). Sweet Spot. 200 Millisekunden, mehr fühlt sich wie Laden an.
- Skelett beim Laden (2, 3). Sweet Spot. Zeigt die Form des Inhalts, bevor er da ist.
- Toast, der hereingleitet (1, 3). Sweet Spot. Bestätigt eine Handlung, wo der Blick gerade ist.
- Druckzustand am Button (1, 3). Sweet Spot. scale 0,98 beim Drücken, und der Klick fühlt sich angenommen an.
- Gescrubbte Bildsequenz (5, 5). Schaustück. Das teuerste und das, an das sich Leute erinnern.
- Wort öffnet sich zum Foto (4, 5). Schaustück. Ein Auftritt für den ersten Bildschirm.
- Video, das am Scrollen hängt (4, 4). Schaustück. Nur mit einer Datei, die auf jedes Bild springen kann, sonst ruckelt es.
- Angepinntes Querkapitel (4, 4). Schaustück. Auf dem Handy untereinander.
- Text füllt sich beim Scrollen (3, 4). Schaustück. Für eine Behauptung, nicht für einen Absatz.
- Karten, die sich stapeln (3, 4). Schaustück. Vier Karten, nicht acht.
- Vorher-Nachher-Regler (3, 4). Schaustück. Trägt, wo es wirklich ein Vorher gibt.
- Karussell zum Ziehen (3, 4). Schaustück. Mit Schwung und Rand, sonst fühlt es sich wie ein Formular an.
- Vollbildmenü mit gestaffelten Links (3, 4). Schaustück. Der eine Ort, an dem ein großer Auftritt jedes Mal passt.
- Farbwechsel beim Hover (1, 2). Grundlage. 150 Millisekunden, kommt mit dem ersten Stylesheet.
- Fokusring, der weich erscheint (1, 2). Grundlage. Pflicht ist der Ring, die Weichheit ist Zugabe.
- Tooltip, der einblendet (1, 2). Grundlage. 100 Millisekunden Verzögerung, damit er nicht bei jedem Vorbeifahren aufgeht.
- Häkchen zeichnet sich (2, 2). Grundlage. Nett in einem Formular, unsichtbar überall sonst.
- Magnetischer Button (3, 2). Wenig Ertrag. Braucht einen Zeiger und erklärt nichts.
- Eigener Cursor (3, 1). Wenig Ertrag. Versteckt den Zeiger, den alle kennen.
- Partikelhintergrund (4, 2). Wenig Ertrag. 60 Bilder pro Sekunde, solange der Tab offen ist.
- Preloader mit Zähler (3, 1). Wenig Ertrag. Ein bis drei Sekunden Wartezeit, die es vorher nicht gab.
- Schreibmaschine auf der Überschrift (2, 1). Wenig Ertrag. Zwei Sekunden, bis man weiß, worum es geht.
- Parallaxe auf jedem Bild (3, 2). Wenig Ertrag. Eines je Bildschirm trägt, alle zusammen schwimmen.
- Verzerrung per WebGL (5, 3). Wenig Ertrag. 150 Kilobyte für einen Effekt, den Touch nie sieht.
Wer die Liste mit einer eigenen Seite abgleicht, findet meist zwei oder drei Effekte aus der letzten Gruppe, die im Briefing standen, weil sie auf einer anderen Seite gut aussahen. Dort waren sie vielleicht das eine Schaustück. Hier sind sie das dritte.
Wie bewertet man die eigene Liste?
In fünf Schritten, und die Liste wird dabei kürzer als das Briefing. Das ist kein Nebeneffekt, sondern der Zweck.
- Alles aufschreiben. Jeden Effekt aus dem Briefing, und dazu die, die niemand bestellt hat, aber alle erwarten, etwa Hover-Zustände und das Öffnen von Menüs.
- Aufwand mit allen Kosten. Bau, Bibliothek, Bilder je Sekunde, der Zweig für reduzierte Bewegung und die Änderung, wenn der Inhalt sich ändert. Wer nur den Bau zählt, landet bei jedem Schaustück eine Stufe zu tief.
- Wirkung nach den drei Fragen. Erklärt er den Aufbau, lässt er die Seite fertig wirken, bringt er jemanden zum Handeln. Dreimal Nein ist eine 1, so schön der Effekt auch ist.
- Behalten, was zwei Punkte über dem Aufwand liegt. Dazu ein Schaustück, bei dem beide Zahlen 4 oder 5 sind. Der Rest fliegt, oder bleibt als Grundlage, wenn er schon da ist.
- Eine Dauer, eine Kurve, ein Weg. Für jeden Auftritt auf der Seite, an einer Stelle notiert, an der die nächste Person sie findet.
// effort / impact, both 1 to 5const rating = [ { effect: "staggered entrance", effort: 1, impact: 4 }, // build { effect: "count-up", effort: 2, impact: 4 }, // build { effect: "word opens into photo", effort: 4, impact: 5 }, // the one set piece { effect: "magnetic button", effort: 3, impact: 2 }, // drop { effect: "custom cursor", effort: 3, impact: 1 }, // drop];
Die Liste wird kürzer als das Briefing, und die Seite wird davon besser.
