Zum Inhalt springen
Elemente/

Scroll-Effekte

Diese Effekte sind direkt an die Scrollposition gekoppelt. Scrolle langsam, um die Bewegung zu spüren.

Effekte startest du mit einem Tipp.

Progress & Indikatoren

Lese-Fortschritt und Scroll-Indikatoren.

Scroll Measure LineNeu
Scroll Reading FocusNeu
Reading Progress Line
Scroll Progress Dots
Scroll Progress Bar

Bild & Card

Karten, Bilder und Galerien mit Scroll-Bewegung.

Scroll Page Flip StackNeu
Scroll Expand Banner
Scroll Perspective Card
Scroll Clip Reveal
Scroll Layer Slide
Scroll Reveal Grid
Scroll Scale Card
Scroll Parallax Image
Scroll Gallery Stagger
Scroll Image Reveal
Scroll Tilt Card

Layout-Scroll

Snap, Pinning und sektionsweise Bewegung.

Scroll Parallax Columns
Fade In Up Section
Scroll Section Fade
Scroll Sideways Scroll
Sticky Stacking Cards
Horizontal Scroll Pin

Akzente & Linien

Linien, Marquees, Zitate und Hintergrundwechsel.

Scroll Color Background
Scroll Velocity Text
Scroll Rotate Badge
Scroll Fade Stack
Scroll Marquee Strip
Scroll Divider Expand
Scroll Quote Reveal

Text-Masken

Große Typografie, die sich beim Scrollen via Mask-Gradient offenbart.

Diagonal Text Reveal

Wie viel Scroll-Animation verträgt eine Seite?

Scroll-Effekte koppeln Bewegung an den Weg durch die Seite statt an die Zeit. Ein Balken zeigt, wie viel noch kommt, ein Bild öffnet sich, während es in den sichtbaren Bereich läuft, Karten stapeln sich beim Weiterscrollen übereinander. Die 31 Effekte hier sind in vier Gruppen sortiert: Fortschritt und Anzeigen, Bild und Karte, Layout beim Scrollen, Akzente und Linien.

Eine Seite verträgt ein oder zwei große Scroll-Momente, dazwischen ruhige Abschnitte. Bewegt sich jeder Abschnitt, fällt keiner mehr auf, und das Scrollen fühlt sich zäh an. Die Effekte laufen mit framer-motion und brauchen keine weitere Bibliothek. Sie sind für Touch und kleine Bildschirme abgestimmt, und mit reduzierter Bewegung nehmen sie sich zurück.

Passende Guides

FAQ

Häufige Fragen

Sie nutzen die Scroll-Utilities von Framer Motion und knüpfen Animationen an die Scrollposition, ohne die Performance zu belasten.

Ja. Die Effekte sind auf Touch und kleine Bildschirme abgestimmt und bleiben dort ruhig und flüssig.

Ja. Bei aktivierter Einstellung für reduzierte Bewegung werden die Effekte zurückgenommen.

Deine Frage war nicht dabei? Wir helfen gern weiter.

Kontakt aufnehmen