Scroll-Animationen tragen eine Marke, wenn jede Bewegung eine Aufgabe hat: den Blick auf das Wichtigste lenken, eine Reihenfolge erklären oder ein Produkt erlebbar machen, das sich in einem Standbild nicht zeigt. Sie bremsen, sobald sie Inhalte verstecken, bis die Animation fertig ist, das Scrollen selbst übernehmen oder Rechenleistung kosten, die ein Smartphone nicht hat. Die Entscheidung fällt deshalb nicht zwischen „mit” und „ohne”, sondern bei jeder einzelnen Bewegung: Welche Frage beantwortet sie dem Besucher? Wer darauf keine Antwort hat, streicht sie.

Wann tragen Animationen eine Marke wirklich?

Wenn die Bewegung zum Angebot gehört. Bei einem Unternehmen, das Gefühl, Inszenierung oder Bewegtbild verkauft, ist die Animation Teil des Produkts. Bei einem Unternehmen, das vor allem schnell Auskunft geben muss, ist sie meist Dekoration.

Drei Aufgaben rechtfertigen eine Animation fast immer:

  • Führung: Ein Element, das beim Scrollen hereinkommt, zeigt, wo der Blick als Nächstes hingehört.
  • Erklärung: Ein Ablauf, der Schritt für Schritt aufgebaut wird, ist leichter zu verstehen als ein fertiges Schaubild.
  • Anmutung: Bei Luxus, Architektur oder Film transportiert die Art der Bewegung selbst die Qualität, die der Kunde erwartet.

Alles andere, etwa wackelnde Symbole, drehende Zähler ohne Aussage oder Texte, die Buchstabe für Buchstabe erscheinen, kostet Aufmerksamkeit, ohne etwas zurückzugeben.

Wie sieht das in echten Projekten aus?

Zwei unserer Projekte zeigen beide Enden der Abwägung. Für Limitless Homes, ein auf luxuriöse Immobilienprojekte spezialisiertes Unternehmen in Dubai, haben wir die Oberfläche mit GSAP-Animationen und Lottie-Elementen umgesetzt (Projektseite Limitless Homes). Dort ist die Bewegung das Versprechen: Wer Luxusimmobilien verkauft, muss schon auf der Website zeigen, dass hier niemand mit Standardware arbeitet. Trotz hoher Komplexität stand die Seite in vier Wochen. Das Fazit des Kunden: „Die Website hat unsere Erwartungen übertroffen”, genannt wurden Design, Animation und Performance.

Für die Videoproduktions-Agentur OneMillionMedia lag der Schwerpunkt anders (Projektseite OneMillionMedia). Die Startseite trägt ein Cinematic Hero-Element, also bewegtes Bild direkt zum Einstieg. Darunter folgen flüssige Scroll-Animationen, aber in einem reduzierten Design mit schnellen Ladezeiten. Das Video ist die Hauptsache, die Animationen ordnen sich unter. Umgesetzt war das in zwei Wochen.

Der gemeinsame Nenner beider Projekte: Die Animation folgt aus dem Geschäftsmodell. Ein Bauunternehmen, eine Kanzlei oder ein Handwerksbetrieb würde mit demselben Aufwand an Bewegung eher Vertrauen verlieren als gewinnen.

Wann bremsen Animationen die Website?

Immer dann, wenn sie den Inhalt zurückhalten. Das häufigste Muster: Die Überschrift im Startbereich ist beim Laden unsichtbar und wird erst eingeblendet. Für den Besucher ist das ein kurzer Effekt, für die Messung der Ladezeit ein Problem.

Google misst die gefühlte Ladezeit unter anderem mit dem Largest Contentful Paint, also dem Zeitpunkt, an dem das größte sichtbare Element erscheint. Gut ist ein Wert von 2,5 Sekunden oder weniger. Elemente mit einer Deckkraft von null zählen dabei nicht (web.dev, Largest Contentful Paint): Genannt werden „Elements with an opacity of 0, that are invisible to the user”. Eine Überschrift, die unsichtbar startet, kann also erst gemessen werden, wenn sie eingeblendet ist. Die Einblendung verlängert damit die gemessene Ladezeit.

Zwei weitere Bremsen kommen hinzu. Animationen, die Breite, Höhe oder Position eines Elements verändern, zwingen den Browser, die Seite neu zu berechnen. Und Elemente, die nachträglich ihren Platz wechseln, lassen Inhalte springen. Google empfiehlt dafür einen Wert für die Layoutverschiebung von 0.1 oder weniger (web.dev, Cumulative Layout Shift).

Kosten Animationen Rankings bei Google?

Entscheidend ist nicht, ob sich etwas bewegt, sondern was die Bewegung mit Ladezeit, Reaktionszeit und Stabilität der Seite macht. Google fasst Ladezeit, Reaktionszeit und Layoutstabilität unter den Core Web Vitals zusammen und schreibt dazu: „We highly recommend site owners achieve good Core Web Vitals for success with Search and to ensure a great user experience generally” (Google Search Central, Core Web Vitals).

Für die Reaktionszeit nennt Google eine klare Grenze: Ein Wert von höchstens 200 Millisekunden gilt als gute Reaktionsfähigkeit (web.dev, Interaction to Next Paint). Schwere Animationen, die während des Scrollens den Prozessor auslasten, können genau diese Reaktion verzögern, etwa wenn jemand auf einen Knopf tippt, während im Hintergrund noch drei Effekte laufen.

Unsere Beobachtung aus Projekten: Auf dem eigenen Rechner im Büro fällt das selten auf. Es zeigt sich auf einem älteren Smartphone im mobilen Netz.

Wie animiert man, ohne Ladezeit zu verlieren?

Mit wenigen festen Regeln, die wir bei jeder Umsetzung einhalten. Die erste stammt direkt aus dem Animationsleitfaden von Google: „Avoid any property that triggers layout or paint”, also Eigenschaften, die den Browser zur Neuberechnung des Layouts oder zum Neuzeichnen zwingen (web.dev, Animations guide). In der Praxis heißt das: Bewegt wird nur über Verschiebung, Drehung, Größe und Deckkraft, nicht über Breite, Abstände oder Position.

Unsere übrigen Regeln:

  • Der Startbereich ist sofort sichtbar. Überschrift und Hauptbild stehen beim ersten Laden fertig da. Animiert wird erst darunter.
  • Inhalte funktionieren ohne Animation. Fällt das Skript aus, ist trotzdem alles lesbar. Die Bewegung ist eine Schicht über dem Inhalt, nie seine Voraussetzung.
  • Das Scrollen bleibt beim Besucher. Keine Seiten, die das Scrolltempo übernehmen oder Abschnitte festhalten, bis eine Sequenz durchgelaufen ist.
  • Eine Bibliothek, sauber eingesetzt. Wir arbeiten mit GSAP und ScrollTrigger, weil sich damit Animationen an den Scrollfortschritt binden lassen, ohne dass jede Seite eigenen Code für dieselbe Aufgabe mitbringt.
  • Gemessen wird auf dem Smartphone. Vor dem Livegang prüfen wir die mobile Fassung, nicht nur die am großen Bildschirm.

Wie diese Regeln in unsere Website-Projekte einfließen, beschreiben wir auf der Seite zum Webdesign.

Was müssen Animationen für Barrierefreiheit leisten?

Sie sollten sich abschalten lassen. Bewegung, die beim Scrollen entsteht, kann bei manchen Menschen Schwindel und Übelkeit auslösen. Die Erläuterungen des W3C zu den Barrierefreiheitsrichtlinien formulieren es so: „Some users experience distraction or nausea from animated content” (W3C, Understanding Animation from Interactions). Als häufig nicht notwendige Bewegung nennt das W3C den Parallax-Effekt, bei dem sich Hintergrund und Vordergrund unterschiedlich schnell bewegen. Das zugehörige Kriterium gehört zur höchsten Stufe (Level AAA) der Richtlinien, ist also mehr als das Mindestmaß.

Die technische Lösung ist einfach: Betriebssysteme bieten eine Einstellung für reduzierte Bewegung, und eine Website kann sie abfragen. Ist sie aktiv, erscheinen Inhalte ohne Bewegung an ihrem Platz. Wir setzen das bei jeder Website um, auch wenn das Kriterium über das Mindestmaß hinausgeht, weil es wenig Aufwand kostet und niemanden ausschließt. Welche Pflichten das Barrierefreiheitsstärkungsgesetz darüber hinaus mit sich bringt, steht in unserem Beitrag zur barrierefreien Website.

Wie entscheiden Sie für Ihre eigene Website?

Mit drei Fragen an jede geplante Bewegung:

  1. Welche Aufgabe hat sie? Führung, Erklärung oder Anmutung. Fällt keine Antwort ein, entfällt die Animation.
  2. Was sieht der Besucher, bevor sie startet? Lautet die Antwort „nichts”, ist sie falsch platziert.
  3. Passt sie zu dem, was Sie verkaufen? Ein Immobilienprojekt in Dubai darf anders auftreten als ein Steuerbüro in Mühldorf, und beide haben recht.

Unsere Empfehlung gegen den Strich: Planen Sie Animationen zuletzt, nicht zuerst. Erst stehen Inhalt, Struktur und Ladezeit, dann kommt die Bewegung dazu, und jede einzelne muss sich ihren Platz verdienen. So entstehen Seiten, die beeindrucken und trotzdem schnell sind.

Wenn Sie wissen möchten, wie viel Bewegung zu Ihrer Marke passt, sprechen wir gern über Ihr Vorhaben: Kontakt aufnehmen.

Häufige Fragen

Verlangsamen Scroll-Animationen eine Website?

Nicht zwangsläufig. Animationen, die nur Verschiebung, Größe und Deckkraft verändern, belasten den Browser kaum. Langsam wird eine Seite, wenn Animationen Breite oder Position ändern, viele Effekte gleichzeitig laufen oder wichtige Inhalte erst nach einer Einblendung sichtbar werden.

Schaden Animationen dem Google-Ranking?

Entscheidend sind die Folgen für Ladezeit, Reaktionszeit und Layoutstabilität, die Google als Core Web Vitals misst. Wird etwa die Hauptüberschrift erst eingeblendet, kann sich der gemessene Largest Contentful Paint verschlechtern, weil unsichtbare Elemente dabei nicht zählen.

Welche Animationen sind auf einer Unternehmenswebsite sinnvoll?

Sinnvoll sind Animationen, die eine Aufgabe erfüllen: den Blick führen, einen Ablauf Schritt für Schritt erklären oder bei Marken mit hohem Anspruch an Inszenierung die Qualität des Angebots spürbar machen. Dekorative Effekte ohne Aussage kosten Aufmerksamkeit und Ladezeit.

Was ist prefers-reduced-motion?

Das ist eine Abfrage, mit der eine Website erkennt, ob ein Besucher in seinem Betriebssystem reduzierte Bewegung eingestellt hat. Ist die Einstellung aktiv, sollte die Website Inhalte ohne Animation anzeigen. Das schützt Menschen, denen Bewegung auf dem Bildschirm Schwindel oder Übelkeit bereitet.

Ist Parallax-Scrolling noch zeitgemäß?

Parallax kann wirken, gehört aber zu den Effekten, die das W3C als häufig nicht notwendige Bewegung nennt. Wer ihn einsetzt, sollte ihn sparsam verwenden und bei aktivierter Einstellung für reduzierte Bewegung abschalten, damit niemand durch die Bewegung beeinträchtigt wird.