引入 Lenis smooth scroll

SuneBear · Oct 11, 2023 · a3d9feb · a3d9feb
1 parent 1e26f9d
commit a3d9feb
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 0 deletions.
diff --git a/app.vue b/app.vue
@@ -11,10 +11,26 @@ import '~/styles/main.styl'
 import gsap from 'gsap'
 import { ScrollTrigger } from 'gsap/ScrollTrigger'
 import { ScrollToPlugin } from 'gsap/ScrollToPlugin'
+import Lenis from '@studio-freight/lenis'
+
+const setupSmoothScroll = () => {
+  const lenis = new Lenis({
+    normalizeWheel: true
+  })
+
+  lenis.on('scroll', ScrollTrigger.update)
+
+  gsap.ticker.add((time)=>{
+    lenis.raf(time * 1000)
+  })
+
+  gsap.ticker.lagSmoothing(0)
+}
 
 onMounted(() => {
   gsap.registerPlugin(ScrollTrigger)
   gsap.registerPlugin(ScrollToPlugin)
+  setupSmoothScroll()
 })
 </script>
 
@@ -53,4 +69,20 @@ body
 
 *, :before, :after
   box-sizing: border-box
+
+html.lenis {
+  height: auto;
+}
+
+.lenis.lenis-smooth {
+  scroll-behavior: auto;
+}
+
+.lenis.lenis-smooth [data-lenis-prevent] {
+  overscroll-behavior: contain;
+}
+
+.lenis.lenis-stopped {
+  overflow: hidden;
+}
 </style>
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "vite-plugin-glsl": "^1.1.2"
   },
   "dependencies": {
+    "@studio-freight/lenis": "^1.0.26",
     "@types/three": "^0.156.0",
     "@vueuse/core": "^10.4.1",
     "animejs": "^3.2.1",

diff --git a/yarn.lock b/yarn.lock
@@ -1230,6 +1230,11 @@
     "@sigstore/protobuf-specs" "^0.2.1"
     tuf-js "^2.1.0"
 
+"@studio-freight/lenis@^1.0.26":
+  version "1.0.26"
+  resolved "https://registry.yarnpkg.com/@studio-freight/lenis/-/lenis-1.0.26.tgz#c47ddeed8f9b72379f385696e900f8f484936f5c"
+  integrity sha512-PLpPMtYoo50Z1otpUpGONK/BkJ0nrE7pY6Q1+KMWuPup+S+XFR/FJOXGkrtISzc6DtHgilbi1b6xDgDluFHsaA==
+
 "@tootallnate/once@2":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"