Scroll-Animationen: Dezente Bewegung für Ihre Shop-Seiten

Aktualisiert Juni 2026 - die Hinweise und der unten gezeigte IntersectionObserver-/Reduced-Motion-Code gelten für PrestaShop 8 und 9 (Hummingbird und Classic). Die Hinweise zur Barrierefreiheit berücksichtigen den inzwischen geltenden European Accessibility Act.

Scroll-Animationen - also Elemente, die beim Scrollen einblenden, nach oben gleiten oder in ihre Position zoomen - sind für Shop-Betreiber ein zweischneidiges Werkzeug. Auf einer Marken- oder Startseite lassen sie einen Shop durchdacht und lebendig wirken; in einem Produktraster oder an der Kasse verursachen sie schnell diese halbe Sekunde von "wo ist mein Button hin?", die Bestellungen kostet. Die Kunst besteht nicht darin, sie technisch einzubauen. Sie besteht darin zu wissen, wo sie sich in einem PrestaShop-Shop lohnen, wo sie unauffällig Conversions kosten und wie Sie sie hinzufügen, ohne Ihren PageSpeed-Wert nach unten zu ziehen. Dieser Leitfaden dreht sich genau um diese Abwägung in einem PrestaShop-Shop - welche Templates, welche Backoffice-Bereiche und welches Performance-Budget Sie beachten müssen.

Wenn Ihr eigentliches Ziel darin besteht, eigenen Frontend-Code updatesicher durch Theme-Aktualisierungen zu bringen, ist das ein anderes (und wichtiges) Thema - wir behandeln es separat in eigenes CSS und JavaScript in PrestaShop, ohne Updates zu beschädigen. Hier gehen wir davon aus, dass Sie sich für Bewegung entschieden haben und sie richtig umsetzen möchten.

Wo Scroll-Animationen sinnvoll sind - und wo sie Bestellungen kosten

PrestaShop ist eine Transaktionsplattform, keine Portfolio-Website. Die ehrliche Regel lautet: Animieren Sie Seiten, auf denen Besucher stöbern oder überzeugt werden, aber niemals Seiten, auf denen sie kaufen oder vergleichen. Übertragen auf die konkreten Controller und Templates, die Sie bearbeiten werden:

Was bedeutet das also für Sie? Die Versuchung ist groß, eine "alles einblenden"-Bibliothek im gesamten Theme zu aktivieren und sie auf dem Desktop zu bewundern. Die Aufgabe des Shop-Betreibers ist das Gegenteil: Animationen nur auf Startseite und CMS-Templates beschränken und die Templates ausdrücklich ausschließen, auf denen Kunden entscheiden und bezahlen. Ein Kategorieraster, das zögert, bevor es Produkte zeigt, wirkt nicht hochwertig - es wirkt bei langsamer Verbindung kaputt.

Der Realitätscheck für Mobilgeräte

Mehr als die Hälfte des Traffics der meisten PrestaShop-Shops kommt vom Smartphone - und genau dort werden Scroll-Animationen problematisch. Was auf einem MacBook butterweich läuft, ruckelt auf einem drei Jahre alten Android-Gerät. Testen Sie auf echter Mittelklasse-Hardware, nicht auf Ihrer Entwicklungsmaschine - und betrachten Sie Mobilgeräte als Grund, weniger zu tun, nicht als Bühne zum Vorführen. Die responsiven Themes von PrestaShop ordnen Inhalte auf kleinen Bildschirmen ohnehin stark um; Animationen darüberzulegen ist genau der Punkt, an dem ruckeliges Scrollen entsteht.

Animationstypen, die zu einem E-Commerce-Shop passen

• Einblenden. Opazität 0 -> 1. Der sicherste Effekt, passend für jeden Inhaltsblock. Wenn Sie nur einen auswählen, nehmen Sie diesen.
• Nach oben gleiten. Das Element steigt 20-30px nach oben und blendet dabei ein. Ein Hauch von Tiefe; gut für Testimonial- oder Feature-Karten auf der Startseite.
• Gestaffeltes Einblenden. Jedes Element in einer Reihe animiert einen kleinen Moment nach dem vorherigen und erzeugt so eine Kaskade. Reservieren Sie das für einen kuratierten Startseitenblock - eine handverlesene "Empfohlen"-Reihe - niemals für das Kategorieraster, wo es das Scannen nur verlangsamt.
• Parallax. Der Hintergrund bewegt sich mit anderer Geschwindigkeit als der Vordergrund. Das kann in einem einzelnen Hero- oder Markenstory-Abschnitt eindrucksvoll aussehen, ist aber performanceintensiv und eine häufige Quelle für Ruckeln auf Mobilgeräten. Maximal ein Abschnitt pro Seite, und testen Sie ihn vor der Veröffentlichung auf einem Smartphone.

Die Gestaltungsregeln, die es dezent halten

Der Unterschied zwischen "hochwertig" und "nervig" liegt vollständig in den Einstellungen, nicht in der Technik:

• Zurückhaltung. Wenn Besucher die Animation bewusst bemerken, ist sie zu stark. Elemente sollten wirken, als seien sie natürlich erschienen, nicht als hätten sie eine kleine Show aufgeführt.
• Tempo. 200-400ms sind der Idealbereich. Schneller wirkt knackig; langsamer wirkt träge. Überschreiten Sie niemals 600ms - niemand sollte warten müssen, bis Ihre Seite mit der Bewegung fertig ist, bevor der Inhalt lesbar wird.
• Nur einmal. Animieren Sie ein Element beim ersten Eintritt in den sichtbaren Bereich und lassen Sie es danach in Ruhe. Eine erneute Animation bei jedem Zurückscrollen ist der häufigste Weg, einen schönen Effekt billig wirken zu lassen.
• Bewegungspräferenzen respektieren. Manche Besucher setzen prefers-reduced-motion auf Betriebssystemebene (oft wegen vestibulärer Störungen). Respektieren Sie das - und beachten Sie, dass die EU-Regeln zur Barrierefreiheit erwarten, dass Ihr Shop für diese Menschen vollständig nutzbar bleibt.

Performance und Barrierefreiheit: die nicht verhandelbaren Punkte

Hier schaden die meisten selbstgebauten Scroll-Animationen einem PrestaShop-Shop eher, als dass sie helfen. Zwei technische Realitäten entscheiden, ob Ihre Animation praktisch kostenlos oder teuer ist:

Animieren Sie nur opacity und transform. Diese beiden Eigenschaften werden vom Compositor des Browsers verarbeitet - sie zwingen die Seite nicht dazu, das Layout neu zu berechnen, sodass der Hauptthread für alles andere frei bleibt. Animationen von width, height, top, left, margin oder padding lösen in jedem Frame einen Layout-Reflow aus, und auf einer inhaltsreichen PrestaShop-Kategorieseite ist genau das die Art von Kosten, die als Ruckeln sichtbar wird.

Nutzen Sie den Intersection Observer, niemals Scroll-Event-Listener. Ein naiver window.addEventListener('scroll', ...) feuert Dutzende Male pro Sekunde und konkurriert mit PrestaShops eigenen Frontend-Skripten (Warenkorb, AJAX der Facettensuche, Karussell). Der Intersection Observer wird nur ausgelöst, wenn ein Element tatsächlich in den sichtbaren Bereich kommt - das ist sowohl korrekt als auch günstig.

Bei der Barrierefreiheit ist die Mindestanforderung: Verstecken Sie niemals essenzielle Inhalte hinter einer Animation, die von JavaScript abhängt - wenn ein Skript ausfällt, müssen die Inhalte (und besonders Preis und Kaufen-Button) trotzdem vorhanden sein. Animieren Sie keinen Text, während ein Screenreader ihn möglicherweise vorliest, und vermeiden Sie jedes Blinken oder schnelle Bewegungen. Der European Accessibility Act behandelt Animationen, die den Zugang zu Inhalten blockieren oder erschweren, als Compliance-Problem, nicht als Stilfrage.

Die zwei CSS-Regeln, die die Hauptarbeit leisten

Ein korrektes, leichtgewichtiges Einblenden ist hauptsächlich CSS - JavaScript fügt nur dann eine Klasse hinzu, wenn das Element in den sichtbaren Bereich kommt. Das Muster unten animiert ausschließlich opacity und transform und enthält die prefers-reduced-motion-Absicherung, mit der Sie bei der Barrierefreiheit auf der richtigen Seite bleiben. Das ist Vanilla-CSS, ohne Bibliothek:

/* hidden state: paint it, but offset and transparent */
.mpr-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .35s ease, transform .35s ease;
}

/* JS adds .is-visible when the element scrolls into view */
.mpr-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* respect the visitor's OS-level motion preference */
@media (prefers-reduced-motion: reduce) {
  .mpr-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

Und der Observer, der die Klasse einmal umschaltet und dann aufhört, das Element zu beobachten - beachten Sie den unobserve-Aufruf. Damit setzen Sie die Regel "nur einmal animieren" um, ohne laufende Listener zurückzulassen:

const io = new IntersectionObserver((entries, obs) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
      obs.unobserve(entry.target);
    }
  });
}, { threshold: 0.15 });

document.querySelectorAll('.mpr-reveal').forEach((el) => io.observe(el));

Liefern Sie dieses JS als externe Datei aus, die über den Asset-Hook Ihres Moduls registriert wird - nicht als Inline-<script> in einem Template - aus den Gründen, die im oben genannten CSS/JS-Leitfaden beschrieben sind. Beschränken Sie die Klasse .mpr-reveal ausschließlich auf Startseiten- und CMS-Templates, genau wie es die Tabelle abbildet.

Drei Wege, Scroll-Animationen in PrestaShop hinzuzufügen

Der erste Weg verdient eine Warnung, über die die meisten Händler stolpern: Wenn Sie Theme-Dateien bearbeiten, um Skript und CSS hinzuzufügen, tun Sie das in einem Child-Theme, sonst löscht das nächste Theme-Update Ihre Arbeit unbemerkt. Warum das so ist und wie es richtig geht, erklären wir ausführlich in Child-Themes in PrestaShop: Warum Sie niemals das Parent-Theme bearbeiten sollten. Und vermeiden Sie Schwergewichte - vollständige Frameworks wie GSAP oder Anime.js fügen 30-60KB JavaScript für Fähigkeiten hinzu, die ein Shop nie nutzt; ein einfaches Einblenden-und-Gleiten rechtfertigt dieses Gewicht auf einer Website mit Bestelltrichter nicht.

Eine verwandte Mikrointeraktion lohnt sich im selben Zuge, weil sie zur gleichen Intersection-Observer-Familie gehört: ein Zurück-nach-oben-Button, der einblendet, sobald Besucher über den ersten sichtbaren Bereich hinausgescrollt haben. Das ist das seltene Stück scrollausgelöster Bewegung, das auf jeder Seite willkommen ist, weil es Reibung reduziert, statt sie hinzuzufügen.

Wo das Scroll Animations Modul ins Spiel kommt

Die Einstellungen für Scroll-Animationen zeigen einen Aktivieren-Schalter, ein Dropdown für den Animationstyp, Felder für Verzögerung und Dauer sowie ein Feld für CSS-Selektoren.

Der Modulweg ist für Shop-Betreiber gedacht, die möchten, dass die Startseite durchdacht wirkt, aber kein Theme forken und keinen Intersection-Observer-Code von Hand schreiben wollen, der beim nächsten Update bricht. Unser Scroll Animations Modul fügt jedem Element aus dem Backoffice konfigurierbare Einblend-, Gleit- und Zoom-Effekte hinzu - basierend auf einem nativen IntersectionObserver ohne externe Abhängigkeiten, sodass kein 30KB-Framework auf Ihre Seiten geladen wird. Was bringt Ihnen das konkret? Sie steuern Dauer, Auslösepunkt und Effekt pro Element im Adminbereich statt über eine Entwicklerrechnung; die Animationslogik liegt im Modul, nicht in Ihrem Theme, sodass ein Theme-Update sie nicht löschen kann; und weil sie auf opacity und transform im Compositor setzt, ist sie darauf ausgelegt, Ihren PageSpeed-Wert zu erhalten, statt ihn zu verbrauchen.

Welchen Weg Sie auch wählen, die Disziplin bleibt dieselbe - und genau diesen Teil lassen DIY-Anleitungen gern aus: Beschränken Sie Bewegung auf Seiten, die überzeugen sollen, halten Sie sie von Seiten fern, auf denen verkauft und bezahlt wird, animieren Sie nur Opazität und Transform, und testen Sie auf einem echten Smartphone, bevor Sie die Umsetzung als fertig betrachten. Eine Scroll-Animation sollte Besuchern das Gefühl geben, dass die Seite lebt - sie darf sie niemals warten lassen, bis sie sich beruhigt hat, bevor sie kaufen können.

Häufig gestellte Fragen

Wo in einem PrestaShop-Shop kann man Scroll-Animationen sicher einsetzen?

Animieren Sie Seiten, auf denen Besucher stöbern oder überzeugt werden - die Startseite (sparsam) und CMS-Seiten wie "Über uns" oder ein Lookbook. Halten Sie Bewegung von Kategorielisten, Produktseiten und der Kasse fern, wo Kunden scannen, entscheiden und bezahlen. Ein Kategorieraster, das zögert, bevor es Produkte zeigt, wirkt kaputt statt hochwertig, und jede Verzögerung an der Kasse gefährdet direkt die Bestellung.

Warum bestehen alle auf IntersectionObserver statt auf einem Scroll-Listener?

Ein scroll-Event-Listener feuert Dutzende Male pro Sekunde und konkurriert mit PrestaShops eigenen Frontend-Skripten - Warenkorb, AJAX der Facettensuche, Karussell. IntersectionObserver wird nur ausgelöst, wenn ein Element tatsächlich in den sichtbaren Bereich kommt, ist also korrekt und günstig. Außerdem macht er die Regel "nur einmal animieren" trivial: Rufen Sie unobserve für das Element auf, nachdem es eingeblendet wurde, und der Browser beobachtet es gar nicht mehr.

Welche CSS-Eigenschaften lassen sich sicher animieren?

Nur opacity und transform. Beide werden vom Compositor des Browsers verarbeitet und erzwingen keine Layout-Neuberechnung, sodass der Hauptthread frei bleibt. Animationen von width, height, top, left, margin oder padding lösen in jedem Frame einen Reflow aus, und auf einer inhaltsreichen Kategorieseite ist genau das der Aufwand, der als Ruckeln sichtbar wird.

Muss ich prefers-reduced-motion unterstützen?

Ja - und es ist nur eine Media Query, wie im Snippet oben gezeigt. Manche Besucher setzen prefers-reduced-motion: reduce auf Betriebssystemebene, oft wegen vestibulärer Störungen. Das zu respektieren ist nicht nur höflich: Der European Accessibility Act behandelt Animationen, die den Zugang zu Inhalten erschweren, als Compliance-Problem. Setzen Sie das Element innerhalb dieser Media Query ohne Transition in seinen sichtbaren Zustand, damit es sofort erscheint.

Ist eine Bibliothek wie AOS oder GSAP eine gute Idee?

AOS ist eine vernünftige schnelle Lösung, wenn Sie Elemente in einem Child-Theme mit data-aos markieren können. Vermeiden Sie Schwergewichte - GSAP und Anime.js fügen 30-60KB JavaScript für Fähigkeiten hinzu, die ein Shop nie nutzt, und ein einfaches Einblenden-und-Gleiten rechtfertigt dieses Gewicht auf einer Website mit Bestelltrichter nicht. Das oben gezeigte Vanilla-Muster mit IntersectionObserver besteht aus wenigen Zeilen und verursacht keinerlei Framework-Kosten.

Schaden Scroll-Animationen meinem PageSpeed-Wert?

Das müssen sie nicht. Richtig umgesetzt - nur Opazität und Transform animieren, IntersectionObserver verwenden, den Effekt auf wenige Templates beschränken und schwere Frameworks vermeiden - sind die Kosten vernachlässigbar. Problematisch wird es, wenn Sie eine "alles einblenden"-Bibliothek themeweit aktivieren, layoutauslösende Eigenschaften animieren oder für ein einziges Einblenden ein 30KB-Animationsframework laden. Grenzen Sie den Einsatz eng ein und testen Sie auf einem echten Mittelklasse-Smartphone.

Warum wirkt meine Animation auf Smartphones ruckelig, auf meinem Laptop aber flüssig?

Weil mehr als die Hälfte Ihres Traffics mobil ist und Animationen genau dort abbauen. Ein drei Jahre altes Android-Gerät hat deutlich weniger Reserven als Ihre Entwicklungsmaschine, und die responsiven Themes von PrestaShop ordnen Inhalte auf kleinen Bildschirmen ohnehin stark um - Animationen darüberzulegen ist die Ursache des Ruckelns. Behandeln Sie Mobilgeräte als Grund, weniger zu tun: weniger animierte Elemente, kein Parallax, und immer auf echter Mittelklasse-Hardware prüfen.

Verwandte Leitfäden

• Zurück-nach-oben-Button: Ein kleines UX-Detail, das überraschend wichtig ist
• Eigenes CSS und JavaScript in PrestaShop, ohne Updates zu beschädigen
• Child-Themes in PrestaShop: Warum Sie niemals das Parent-Theme bearbeiten sollten