GSAP
Bewegung, die über framer-motion hinausgeht: gezeichnete Linien, festgehaltene Abschnitte, Schwung beim Ziehen, Formen, die ineinander laufen.
Diese Sections bringen ihre Bewegung mit GSAP. Einmal installieren, dann laufen alle. An den Karten steht der Hinweis deshalb nicht noch einmal.
Lenis macht das Mausrad weich. Das ist keine Sache der einzelnen Section: Lenis wird einmal für die Seite gesetzt und gilt danach überall. Das Scrollen läuft dann über JavaScript statt über den Browser, und auf schweren Seiten kann es mit Trackpad ruckeln. Die Vorschauen hier scrollen deshalb ohne. Alles läuft auch ohne Lenis.
Was sind GSAP-Sections und wann brauchst du sie?
Die GSAP-Sections nutzen die GreenSock Animation Platform für scrollgesteuerte Effekte, die über das hinausgehen, was CSS und framer-motion bequem leisten: Kapitel, die stehen bleiben, während der Inhalt wechselt, horizontale Galerien, die vom vertikalen Scrollen getrieben werden, Wörter, die sich aufteilen und erscheinen, Pfade, die sich beim Scrollen zeichnen, und Bildwände, die auf den Cursor reagieren.
Setz sie für ein oder zwei Momente auf einer Seite ein, etwa eine Produktgeschichte oder eine Portfolio-Strecke, und halte den Rest ruhig. GSAP ist eine eigene Abhängigkeit: Installiere das Paket gsap über npm, die meisten Sections nutzen zusätzlich das Plugin ScrollTrigger. GSAP und alle Plugins sind kostenlos, auch für kommerzielle Projekte. Jede Section ist eine einzelne React-Datei mit Tailwind-Klassen und respektiert reduzierte Bewegung.
Passende Guides
Weitere Section-Kategorien
Häufige Fragen
Nein. GSAP und seine Plugins sind kostenlos nutzbar, auch in kommerziellen Projekten. Installiere das Paket gsap über npm.
Ja. Lass pro Element nur eine Bibliothek arbeiten: GSAP für die scrollgesteuerten Szenen, framer-motion für kleine Bewegungen in der Oberfläche. Animieren beide dieselbe Eigenschaft, springt das Element.
Ja, sie folgen dem normalen Scrollen per Touch. Ist reduzierte Bewegung eingestellt, zeigen die Sections ihren Inhalt ohne den Effekt.
Deine Frage war nicht dabei? Wir helfen gern weiter.
Kontakt aufnehmen