{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "smooth-scroll-lenis",
 "name": "Smooth Scroll mit Lenis",
 "name_en": "Smooth scrolling (Lenis)",
 "kurz": "Mausrad-Scroll gleitet per lerp oder fester Dauer nach; scroll-gekoppelte Zeiger und Parallaxen laufen über denselben GSAP-Takt ohne Stufen.",
 "kategorie": "Scroll & Section-Animationen",
 "kategorie_slug": "scroll",
 "kategorie_nr": 5,
 "bau_chat": "C2",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "ruhig",
  "luxuriös"
 ],
 "stimmung_roh": [
  "hochwertig",
  "fließend",
  "ruhig"
 ],
 "technik": [
  "lenis",
  "gsap",
  "scrolltrigger",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "js",
  "gsap",
  "lenis"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Lenis glättet Mausrad- und Trackpad-Scroll. Die Seite läuft der Zielposition per Interpolation (lerp) oder mit fester Dauer und Easing hinterher, statt je Rastung zu springen. Scrollbar und Scroll-Position bleiben nativ, es gibt keinen verschobenen Content-Wrapper. Scroll-Animationen (ScrollTrigger, WebGL) hängen am selben RAF-Loop und laufen deshalb synchron. Touch scrollt standardmäßig nativ (syncTouch: false).",
  "warum_es_wirkt": "Parallaxe, Pins und WebGL-Szenen bewegen sich gleichmäßig statt in Stufen. Das wirkt ruhig und hochwertig. Auf Award-Seiten ist Lenis weiterhin Grundausstattung.",
  "wann_einsetzen": "Bei Seiten mit vielen scroll-gekoppelten Effekten oder mit WebGL, das synchron zum DOM laufen muss.",
  "wann_nicht": "Bei text- oder datenlastigen Seiten, Web-Apps und Shops mit vielen verschachtelten Scroll-Containern oder iframes (über iframes stoppt Lenis). Nicht als Selbstzweck: Ohne Scroll-Effekte bringt es nur Trägheit. Viele Branchen-Rezepte im Fundus schließen es deshalb aus, etwa Handwerk, Architektur und Gastro.",
  "varianten": [
   "Lenis Standard mit lerp 0.1",
   "Lenis mit duration und easing statt lerp, z. B. 1.2 s und 1.001 − 2^(−10t) wie bei Wokine",
   "Locomotive Scroll v5 (baut auf Lenis auf) mit data-scroll-speed",
   "GSAP ScrollSmoother (seit 3.13 kostenlos) mit smooth 0.8, data-speed und data-lag",
   "Lenis Snap (lenis/snap) statt CSS scroll-snap"
  ],
  "umsetzung": "const lenis = new Lenis({ lerp: 0.1, anchors: true }); lenis.on('scroll', ScrollTrigger.update); gsap.ticker.add(t => lenis.raf(t * 1000)); gsap.ticker.lagSmoothing(0); Dazu lenis.css einbinden (u. a. html.lenis { height: auto }, .lenis-smooth { scroll-behavior: auto }). Vorgaben: lerp 0.1, smoothWheel true, syncTouch false, syncTouchLerp 0.075, wheelMultiplier 1, touchMultiplier 1, autoRaf false, allowNestedScroll false. Für den Betrieb mit fester Dauer duration und easing zusammen setzen, dann wird lerp ignoriert. ScrollTrigger mit scrub: true koppeln; ein Zahlenwert wie scrub: 1 glättet ein zweites Mal. Modals und eigene Scroll-Bereiche bekommen data-lenis-prevent oder die prevent-Funktion. Grenzen laut README: kein CSS scroll-snap, Safari auf 60 fps begrenzt (30 fps im Stromsparmodus), keine Wirkung über iframes, position: fixed kann auf Safari vor M1 ruckeln. Die Demo nutzt 1.3.26, das README verlinkt 1.3.27. Einschätzung 2026: weiterhin Standard bei Award-Seiten, der Trend geht zu höherem lerp (spürbar, aber nicht schwammig) und nativem Touch.",
  "mobil": "syncTouch auf false lassen, dann scrollt Touch nativ. syncTouch ist auf iOS vor Version 16 instabil.",
  "reduzierte_bewegung": "Bei prefers-reduced-motion Lenis nicht starten oder lerp: 1 setzen. Lenis 1.3.26 prüft das zusätzlich selbst (Option respectReducedMotion, Vorgabe true) und scrollt dann ohne Glättung.",
  "barrierefreiheit": "Die native Scrollbar bleibt, Suchen auf der Seite funktioniert. Ankerlinks mit anchors: true anspringen. Tab-Fokus prüfen: Bei Fokus-Sprüngen darf Lenis nicht eingreifen."
 },
 "messwerte": {
  "easing": "1.001 - 2^(-10t) (Wokine)",
  "dauer_ms": "1200 (Wokine)",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "lerp .1 (darkroom); Kopplung an ScrollTrigger und GSAP-Ticker (Stewart & Partners)",
  "herkunft": "beobachtet",
  "quelle": "https://www.wokine.com/_nuxt/entry.CEQ4-SOz.js"
 },
 "kurve": null,
 "gesehen_bei": [
  {
   "seite": "Lenis-Showcase: Grand Theft Auto VI",
   "url": "https://www.rockstargames.com/VI",
   "auszeichnung": "",
   "beobachtung": "Auf lenis.dev als Showcase gelistet.",
   "art": "website-ungeprueft"
  },
  {
   "seite": "Lenis-Showcase: Unseen Studio",
   "url": "https://unseen.co",
   "auszeichnung": "",
   "beobachtung": "Auf lenis.dev gelistet; Seite mit WebGL-Welt (‚Drag to explore our world‘).",
   "art": "website-ungeprueft",
   "browser_gemessen": true
  },
  {
   "seite": "Lenis-Showcase: Lando Norris",
   "url": "https://landonorris.com",
   "auszeichnung": "Awwwards SOTD 17.11.2025",
   "beobachtung": "Auf lenis.dev gelistet.",
   "art": "website-ungeprueft",
   "browser_gemessen": true
  },
  {
   "seite": "Lenis-Showcase: OFF+BRAND",
   "url": "https://www.itsoffbrand.com",
   "auszeichnung": "",
   "beobachtung": "Auf lenis.dev gelistet.",
   "art": "website-ungeprueft",
   "browser_gemessen": true
  },
  {
   "seite": "Lenis-Showcase: Netflix Jobs",
   "url": "https://jobs.netflix.com",
   "auszeichnung": "",
   "beobachtung": "Auf lenis.dev gelistet (nicht selbst geöffnet).",
   "art": "website-ungeprueft"
  },
  {
   "seite": "Wokine",
   "url": "https://www.wokine.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (entry.CEQ4-SOz.js): Lenis-Instanz mit easing 1.001 - 2^(-10t), duration 1.2, smoothWheel true, smoothTouch false.",
   "art": "website"
  },
  {
   "seite": "Stewart & Partners",
   "url": "https://www.stewartpartners.studio/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft: lenis@1.1.2 per unpkg; sp-scripts.txt koppelt lenis.on(\"scroll\", ScrollTrigger.update), gsap.ticker.add(lenis.raf), lagSmoothing(0), lenis.stop() während des Preloaders.",
   "art": "website"
  },
  {
   "seite": "darkroom.engineering",
   "url": "https://darkroom.engineering/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (Chunk 3tayqihto2rm7.js): Lenis im Bundle (Optionen wheel {smooth, lerp .1}, touch {lerp .1, inertia 2; iOS lerp .05, inertia 1.7}) – das Studio hinter Lenis setzt es auf der eigenen Seite ein.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Lenis README (Optionen, GSAP-Integration)",
   "url": "https://github.com/darkroomengineering/lenis"
  },
  {
   "titel": "Lenis Website + Showcase",
   "url": "https://lenis.dev/"
  },
  {
   "titel": "Olivier Larose – Smooth Scroll",
   "url": "https://blog.olivierlarose.com/tutorials/smooth-scroll"
  }
 ],
 "kombinierbar_mit": [
  "mehrschicht-parallax",
  "pinned-scrub-scrollytelling",
  "scroll-3d-kamerafahrt",
  "marquee-laufband"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/scroll/smooth-scroll-lenis/",
  "meta": "https://cecodesign.de/lab/fundus/scroll/smooth-scroll-lenis/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/scroll/smooth-scroll-lenis/demo"
 },
 "herkunft": {
  "quelldateien": [
   "scroll.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Drei live geprüfte Lenis-Konfigurationen."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Mausrad-Scroll gleitet per lerp oder fester Dauer nach; scroll-gekoppelte Zeiger und Parallaxen laufen über denselben GSAP-Takt ohne Stufen.",
  "demo": true,
  "abhaengigkeiten": [
   "lenis@1.3.26",
   "gsap@3.15.0",
   "ScrollTrigger@3.15.0"
  ],
  "werte": {
   "lerp": 0.1,
   "lerp_herkunft": "Lenis-Standard, darkroom.engineering",
   "duration_s": 1.2,
   "easing": "t => Math.min(1, 1.001 - Math.pow(2, -10 * t))",
   "easing_herkunft": "Wokine (gemessen); duration gilt nur zusammen mit easing, lerp wird dann ignoriert",
   "optionen": "smoothWheel: true, syncTouch: false, wheelMultiplier: 1, anchors: true, autoRaf: false",
   "kopplung": "lenis.on('scroll', ScrollTrigger.update); gsap.ticker.add(t => lenis.raf(t * 1000)); gsap.ticker.lagSmoothing(0)",
   "scrolltrigger_scrub": true,
   "zeiger": "Minute 48° → 768° (+720°), Stunde 304° → 364° (+60°) über die Strecke top top bis bottom bottom, ease none",
   "parallaxe": "±2vh (4vh Weg), scrub true, start top bottom, end bottom top",
   "kleine_sekunde": "6 Schritte pro Sekunde (21.600 A/h)",
   "ui_easing": "cubic-bezier(0.1, 0.6, 0.4, 1)",
   "ui_dauer_ms": "200 (Links, Knöpfe), 150 (Pult)",
   "vorfuehrung": "Wheel-Rastung 100 px, Takt 130 ms, 3 Rastungen je Bündel, 720 ms Pause; Rückfahrt duration 1.6 s mit Wokine-Easing",
   "messkurve_fenster_s": 2.4
  },
  "ausloeser": "scroll",
  "touch": "Touch scrollt nativ (syncTouch: false), Lenis glättet nur Mausrad und Trackpad. Messkurve und Pultkopf entfallen, das Pult nennt den Touch-Hinweis. Die Uhr steht oben fest (44svh), ihre Zeiger folgen dem nativen Scroll.",
  "reduziert": "Lenis startet nicht und wird auch beim Umschalten auf der Detailseite abgebaut. Nur „Nativ“ ist wählbar, keine Parallaxe, keine Messkurve, die kleine Sekunde steht. Die Zeiger bleiben direkt an die Scroll-Position gekoppelt.",
  "korrekturen": {
   "beschreibung": "Lenis glättet Mausrad- und Trackpad-Scroll. Die Seite läuft der Zielposition per Interpolation (lerp) oder mit fester Dauer und Easing hinterher, statt je Rastung zu springen. Scrollbar und Scroll-Position bleiben nativ, es gibt keinen verschobenen Content-Wrapper. Scroll-Animationen (ScrollTrigger, WebGL) hängen am selben RAF-Loop und laufen deshalb synchron. Touch scrollt standardmäßig nativ (syncTouch: false).",
   "warum_es_wirkt": "Parallaxe, Pins und WebGL-Szenen bewegen sich gleichmäßig statt in Stufen. Das wirkt ruhig und hochwertig. Auf Award-Seiten ist Lenis weiterhin Grundausstattung.",
   "wann_einsetzen": "Bei Seiten mit vielen scroll-gekoppelten Effekten oder mit WebGL, das synchron zum DOM laufen muss.",
   "wann_nicht": "Bei text- oder datenlastigen Seiten, Web-Apps und Shops mit vielen verschachtelten Scroll-Containern oder iframes (über iframes stoppt Lenis). Nicht als Selbstzweck: Ohne Scroll-Effekte bringt es nur Trägheit. Viele Branchen-Rezepte im Fundus schließen es deshalb aus, etwa Handwerk, Architektur und Gastro.",
   "varianten": [
    "Lenis Standard mit lerp 0.1",
    "Lenis mit duration und easing statt lerp, z. B. 1.2 s und 1.001 − 2^(−10t) wie bei Wokine",
    "Locomotive Scroll v5 (baut auf Lenis auf) mit data-scroll-speed",
    "GSAP ScrollSmoother (seit 3.13 kostenlos) mit smooth 0.8, data-speed und data-lag",
    "Lenis Snap (lenis/snap) statt CSS scroll-snap"
   ],
   "umsetzung": "const lenis = new Lenis({ lerp: 0.1, anchors: true }); lenis.on('scroll', ScrollTrigger.update); gsap.ticker.add(t => lenis.raf(t * 1000)); gsap.ticker.lagSmoothing(0); Dazu lenis.css einbinden (u. a. html.lenis { height: auto }, .lenis-smooth { scroll-behavior: auto }). Vorgaben: lerp 0.1, smoothWheel true, syncTouch false, syncTouchLerp 0.075, wheelMultiplier 1, touchMultiplier 1, autoRaf false, allowNestedScroll false. Für den Betrieb mit fester Dauer duration und easing zusammen setzen, dann wird lerp ignoriert. ScrollTrigger mit scrub: true koppeln; ein Zahlenwert wie scrub: 1 glättet ein zweites Mal. Modals und eigene Scroll-Bereiche bekommen data-lenis-prevent oder die prevent-Funktion. Grenzen laut README: kein CSS scroll-snap, Safari auf 60 fps begrenzt (30 fps im Stromsparmodus), keine Wirkung über iframes, position: fixed kann auf Safari vor M1 ruckeln. Die Demo nutzt 1.3.26, das README verlinkt 1.3.27. Einschätzung 2026: weiterhin Standard bei Award-Seiten, der Trend geht zu höherem lerp (spürbar, aber nicht schwammig) und nativem Touch.",
   "mobil": "syncTouch auf false lassen, dann scrollt Touch nativ. syncTouch ist auf iOS vor Version 16 instabil.",
   "reduzierte_bewegung": "Bei prefers-reduced-motion Lenis nicht starten oder lerp: 1 setzen. Lenis 1.3.26 prüft das zusätzlich selbst (Option respectReducedMotion, Vorgabe true) und scrollt dann ohne Glättung.",
   "barrierefreiheit": "Die native Scrollbar bleibt, Suchen auf der Seite funktioniert. Ankerlinks mit anchors: true anspringen. Tab-Fokus prüfen: Bei Fokus-Sprüngen darf Lenis nicht eingreifen."
  },
  "geprueft": "01.11.2026",
  "notiz": "Rezept handwerk-werkstatt-klartext schließt smooth-scroll-lenis ausdrücklich aus (nicht_verwenden: verzögert, bringt hier nichts). Deshalb Rezept luxus-manufaktur-stille: gleiche Stimmung wie der Steckbrief (ruhig, luxuriös), Lenis dort nicht ausgeschlossen. Erfundene Uhrenmanufaktur Brehme aus Erfurt, Bodoni Moda und Instrument Sans, Anthrazit und Weiß, Messing nur als Linie, alle Bilder eigene SVG. Links scrollen Neuheit und Kaliberzahlen, rechts steht die Uhr; ihre Zeiger hängen per ScrollTrigger scrub: true am Scroll, die Glättung kommt so allein von Lenis. Messpult mit drei Varianten (Nativ, lerp 0.1, duration 1.2 mit Wokine-Easing) und Live-Kurve Ziel (targetScroll, gestrichelt) gegen Ist (scrollY). Die Vorführung schickt synthetische Wheel-Events mit 100 px je Rastung an Lenis (im Modus Nativ scrollBy); in der Galerie-Vorschau wechseln die Runden zwischen lerp und duration. Echte Eingaben beenden die Vorführung. Nachgebessert: Uhr am Desktop kleiner (min(58 %, 520 px)), damit das Messpult nur das Band und nicht das Gehäuse überdeckt; in der Vorschau Kopf ohne Navigation zweispaltig (Knopf rechts) und Uhr mittig. AD-Review 01.11.2026: Note 4 Zugang 02.11.2026: --meta #8b9097 → #676c73 (5,3:1) für Labels und Schrift, Zifferblatt-Grafik unverändert; Kontrastmodus-Rahmen für Knöpfe."
 }
}