Smooth Scrolling mit Lenis in Webflow implementieren

Lenis ist eine leichte JavaScript-Library, die natives Scrolling "abfängt" und in kontrolliertes Smooth-Scrolling verwandelt – inklusive feinjustierbarer Geschwindigkeit und Dämpfung. Webflow bringt zwar von Haus aus viele No-Code-Funktionen mit, aber gerade beim Scroll-Erlebnis stößt man schnell an Grenzen; genau hier ergänzt Lenis Webflow perfekt und hebt das Look & Feel einer Seite auf ein deutlich moderneres, „app-artiges“ Niveau.

Lenis lässt sich in Webflow ziemlich entspannt integrieren – ein bisschen Custom Code, ein paar Zeilen JavaScript, und das Scroll-Erlebnis fühlt sich sofort spürbar „premium“ an. Bei keativsquare setzen wir Lenis regelmäßig ein, um Webflow-Projekte smoother, moderner und markentauglich zu machen – gerade im Website-as-a-Service-Kontext.

‍

Lenis in Webflow klingt easy – verhält sich aber tricky

Auf den ersten Blick wirkt Lenis simpel, in der Praxis tauchen aber schnell typische Webflow-Fallen auf: falsche Einbauposition, fehlende Skripte oder CSS-Werte, die in die Scroll-Logik reinfunken. Wenn dann noch mehrere Websites im Spiel sind – wie bei WaaS-Modellen – multiplizieren sich kleine Fehler schnell über viele Projekte hinweg. Genau das wollen wir bei kreativsquare von Anfang an vermeiden.

‍

Lenis in Webflow einbauen (Step-by-step)

1) Recommended CSS im Head hinterlegen

Der erste Schritt ist unspektakulär, aber wichtig: In Webflow über Project Settings → Custom Code → Head Code kommen die empfohlenen Lenis-CSS-Regeln rein.
Damit weiß Lenis, wie es mit html, body und Zuständen wie „smooth“ oder „stopped“ umgehen soll; auch Hooks wie [data-lenis-prevent] hängen an diesen Styles.

2) Lenis per CDN einbinden

Da Webflow in der Regel ohne eigenes Build-Setup läuft, ist der einfachste Weg ein Script-Tag über ein CDN.
Der Code gehört in den Footer-Bereich (z. B. „Before </body>“), damit erst der Content geladen wird und anschließend die Lenis-Bibliothek.

1<script src="https://unpkg.com/lenis@1.3.17/dist/lenis.min.js"></script> 

3) Lenis initialisieren und RAF-Loop aufsetzen

Damit Lenis tatsächlich arbeitet, braucht es einen kleinen Loop über requestAnimationFrame.
Direkt nach dem CDN-Script folgt die Initialisierung, ebenfalls im Footer-Bereich:

<script>
  const lenis = new Lenis()

  function raf(time) {
    lenis.raf(time)
    requestAnimationFrame(raf)
  }

  requestAnimationFrame(raf)
</script>

4) Feintuning: lerp & wheelMultiplier

Jetzt wird es spannend für das „Look & Feel“:

• lerp bestimmt, wie weich sich das Scrollen anfühlt (niedriger Wert = smoother).

• wheelMultiplier beeinflusst die Scroll-Geschwindigkeit.

Ein praxisnaher Startpunkt:

<script>
  const lenis = new Lenis({
    lerp: 0.05,
    wheelMultiplier: 1
  })

  function raf(time) {
    lenis.raf(time)
    requestAnimationFrame(raf)
  }

  requestAnimationFrame(raf)
</script>

‍

In Tests schauen wir uns an, wie sich die Seite anfühlt: Manche Marken wirken stimmiger mit sehr ruhigem Scroll, andere dürfen etwas direkter und schneller sein. Genau hier kann man das Markenerlebnis sehr fein justieren.

‍

5) Scroll in bestimmten Bereichen gezielt zulassen: data-lenis-prevent

Sobald Modals, Slidern oder Scrollboxen ins Spiel kommen, wird es schnell komplexer.
Mit dem Attribut data-lenis-prevent lässt sich festlegen, dass bestimmte Container ihr eigenes Scroll-Verhalten behalten sollen.
In Webflow läuft das über ein Custom Attribute am entsprechenden Element – ideal für Bereiche mit Overflow: scroll/auto, damit Nutzer:innen nicht die Orientierung verlieren.

‍

Gerade in größeren Portalen oder WaaS-Setups mit vielen Sektionen und Layern ist dieses Detail Gold wert, weil es dafür sorgt, dass sich alles kontrolliert und intuitiv anfühlt, statt „zu smooth“ und unberechenbar.

‍

Experten-Einblicke aus der Agentur-Praxis

Ein paar Learnings, die sich in Projekten immer wieder bewährt haben:

• Lenis möglichst einmal zentral im Projekt aufsetzen, nicht seitenweise unterschiedlich – das reduziert Konflikte und spart langfristig Zeit.

• Ankerlinks lieber über Lenis scrollTo() lösen, statt Browser-Standard-Jumps zu nutzen – so bleibt das Erlebnis durchgehend konsistent.

• Eingebettete Inhalte wie Maps oder externe Widgets gezielt testen; je nach Browser und Gerät kann sich das Scroll-Verhalten hier anders anfühlen.

‍

Bei kreativsquare fließen solche Patterns in unsere Projekte und Design-Systeme ein, sodass Kund:innen das moderne Scroll-Erlebnis „einfach mitgeliefert“ bekommen, ohne sich tief in Code einarbeiten zu müssen.

‍

Präventive Maßnahmen: Damit Lenis langfristig stabil bleibt

Damit das Smooth-Scrolling nicht nur am Launch-Day gut aussieht, sondern auch Monate später noch zuverlässig läuft, helfen ein paar einfache Routinen:

• Eine feste Lenis-Version im Script-Tag nutzen (z. B. @1.3.17), statt ungeprüft die jeweils aktuellste zu ziehen.

• Parameter wie lerp, wheelMultiplier und Co. kommentieren – so ist später sofort klar, warum genau diese Werte gewählt wurden.

• Nach größeren Änderungen in Webflow (neue Interactions, neue Navigation, zusätzlicher Content) bewusst das Scroll-Verhalten auf Desktop und Mobile durchspielen.

• Wer keine eigene technische Betreuung hat, kann das Thema gut an eine Digitalagentur abgeben – bei kreativsquare gehört die Pflege solcher Effekte zum laufenden Service, damit sich Kunden auf Inhalte und Wachstum konzentrieren können.

‍

So entsteht ein Webflow-Setup, das nicht nur gut aussieht, sondern sich auch genauso anfühlt – modern, geschmeidig und passend zur Marke.

‍