Lenis

Lenis ist eine leichtgewichtige JavaScript-Bibliothek, die das Scrollverhalten einer Website glättet. Sie ersetzt das native, ruckartige Scrollen des Browsers durch eine flüssige, physikbasierte Bewegung und bildet die Grundlage für Scroll-gesteuerte Animationen.

Warum Lenis wichtig ist

Das native Scrollverhalten eines Browsers ist funktional, fühlt sich aber auf vielen Websites abgehackt an. Besonders auf Seiten mit langen Inhalten, Parallax-Effekten oder Scroll-basierten Animationen macht sich der Unterschied bemerkbar. Ein flüssiges Scrollerlebnis vermittelt Qualität und Sorgfalt, ähnlich wie eine gut abgestimmte Typografie oder ein durchdachtes Farbsystem.

Lenis hat sich in kurzer Zeit als Standard für Smooth Scrolling etabliert, weil es im Vergleich zu älteren Lösungen wie Locomotive Scroll deutlich performanter und leichter ist. Die Bibliothek arbeitet nativ mit der Scroll-Mechanik des Browsers zusammen, anstatt sie komplett zu ersetzen. Das bedeutet bessere Zugänglichkeit, weniger Konflikte mit nativen Browser-Features und eine geringere Dateigrösse.

Lenis in der Praxis

Bei designtakt gehört Lenis zum Standardsetup für Websites, die ein gewisses Mass an Erlebnis und Interaktivität bieten sollen. Die Einbindung erfolgt über Custom Code in Webflow oder als npm-Paket in Astro-Projekten.

Der häufigste Anwendungsfall: Lenis als Grundlage für GSAP ScrollTrigger-Animationen. Lenis normalisiert das Scrollverhalten, GSAP baut darauf die eigentlichen Animationen.

Was designtakt bei Smooth Scrolling wichtig findet: Es muss subtil bleiben. Zu starke Glättung fühlt sich träge an und stört Nutzer, die schnell durch Inhalte navigieren wollen. Bei designtakt kalibrieren wir die Lenis-Parameter (Duration, Easing) so, dass das Scrollen sich natürlich anfühlt, nicht wie ein Effekt. Auf mobilen Geräten deaktivieren wir Lenis in der Regel komplett, weil die nativen Touch-Scroll-Gesten bereits optimiert sind und ein Eingriff die Nutzererfahrung verschlechtert.

Häufige Fragen zu Lenis

Ist Lenis kostenlos?

Ja, Lenis ist eine Open-Source-Bibliothek und kann frei verwendet werden. Sie wird aktiv weiterentwickelt und hat eine grosse Community. Die Dateigrösse liegt unter 10 KB (gzipped), was sie auch für performance-kritische Projekte geeignet macht.

Kann man Lenis in Webflow nutzen?

Ja, Lenis lässt sich in Webflow über Custom Code einbinden. Die Bibliothek wird per Script-Tag geladen und mit wenigen Zeilen JavaScript initialisiert. In Kombination mit GSAP ScrollTrigger entsteht ein Setup, das flüssiges Scrollen und koordinierte Scroll-Animationen ermöglicht. Bei designtakt ist dieses Setup Teil des Standard-Stacks für Webflow-Projekte mit Animationsanspruch.