fix frame sync on complete

bundled/lenis.js

@@ -96,7 +96,6 @@
       }
 
       // Call the onUpdate callback with the current value and completed status
-
       (_this$onUpdate = this.onUpdate) == null ? void 0 : _this$onUpdate.call(this, this.value, completed);
       if (completed) {
         this.stop();
@@ -492,7 +491,8 @@
           lerp: hasTouchInertia ? _this.syncTouchLerp : _this.options.__iosNoInertiaSyncTouchLerp
         }));
       };
-      this.onScroll = function () {
+      this.onNativeScroll = function () {
+        if (_this.__preventNextScrollEvent) return;
         if (!_this.isScrolling) {
           var lastScroll = _this.animatedScroll;
           _this.animatedScroll = _this.targetScroll = _this.actualScroll;
@@ -543,7 +543,7 @@
       this.isSmooth = _syncTouch || smoothWheel || smoothTouch;
       this.isScrolling = false;
       this.targetScroll = this.animatedScroll = this.actualScroll;
-      this.options.wrapper.addEventListener('scroll', this.onScroll, {
+      this.options.wrapper.addEventListener('scroll', this.onNativeScroll, {
         passive: false
       });
       this.virtualScroll = new VirtualScroll(eventsTarget, {
@@ -556,7 +556,7 @@
     var _proto = Lenis.prototype;
     _proto.destroy = function destroy() {
       this.emitter.destroy();
-      this.options.wrapper.removeEventListener('scroll', this.onScroll, {
+      this.options.wrapper.removeEventListener('scroll', this.onNativeScroll, {
         passive: false
       });
       this.virtualScroll.destroy();
@@ -590,6 +590,7 @@
     _proto.reset = function reset() {
       this.isLocked = false;
       this.isScrolling = false;
+      this.animatedScroll = this.targetScroll = this.actualScroll;
       this.velocity = 0;
       this.animate.stop();
     };
@@ -699,11 +700,14 @@
           }
           if (!completed) _this2.emit();
           if (completed) {
-            // avoid emitting twice (onScroll)
+            _this2.reset();
+            _this2.emit();
+            onComplete == null ? void 0 : onComplete(_this2);
+
+            // avoid emitting event twice
+            _this2.__preventNextScrollEvent = true;
             requestAnimationFrame(function () {
-              _this2.reset();
-              _this2.emit();
-              onComplete == null ? void 0 : onComplete(_this2);
+              delete _this2.__preventNextScrollEvent;
             });
           }
         }

dist/types/index.d.ts

@@ -98,7 +98,7 @@ export default class Lenis {
     }) => void;
     resize(): void;
     emit(): void;
-    onScroll: () => void;
+    onNativeScroll: () => void;
     direction: number;
     reset(): void;
     start(): void;
@@ -116,6 +116,7 @@ export default class Lenis {
         force?: boolean;
         programmatic?: boolean;
     }): void;
+    __preventNextScrollEvent: boolean;
     get rootElement(): Window | HTMLElement;
     get limit(): number;
     get isHorizontal(): boolean;

src/animate.js

@@ -24,7 +24,6 @@ export class Animate {
     }
 
     // Call the onUpdate callback with the current value and completed status
-
     this.onUpdate?.(this.value, completed)
 
     if (completed) {

src/index.js

@@ -112,7 +112,7 @@ export default class Lenis {
     this.isScrolling = false
     this.targetScroll = this.animatedScroll = this.actualScroll
 
-    this.options.wrapper.addEventListener('scroll', this.onScroll, {
+    this.options.wrapper.addEventListener('scroll', this.onNativeScroll, {
       passive: false,
     })
 
@@ -127,7 +127,7 @@ export default class Lenis {
   destroy() {
     this.emitter.destroy()
 
-    this.options.wrapper.removeEventListener('scroll', this.onScroll, {
+    this.options.wrapper.removeEventListener('scroll', this.onNativeScroll, {
       passive: false,
     })
 
@@ -243,7 +243,9 @@ export default class Lenis {
     this.emitter.emit('scroll', this)
   }
 
-  onScroll = () => {
+  onNativeScroll = () => {
+    if (this.__preventNextScrollEvent) return
+
     if (!this.isScrolling) {
       const lastScroll = this.animatedScroll
       this.animatedScroll = this.targetScroll = this.actualScroll
@@ -256,6 +258,7 @@ export default class Lenis {
   reset() {
     this.isLocked = false
     this.isScrolling = false
+    this.animatedScroll = this.targetScroll = this.actualScroll
     this.velocity = 0
     this.animate.stop()
   }
@@ -380,11 +383,14 @@ export default class Lenis {
         if (!completed) this.emit()
 
         if (completed) {
-          // avoid emitting twice (onScroll)
+          this.reset()
+          this.emit()
+          onComplete?.(this)
+
+          // avoid emitting event twice
+          this.__preventNextScrollEvent = true
           requestAnimationFrame(() => {
-            this.reset()
-            this.emit()
-            onComplete?.(this)
+            delete this.__preventNextScrollEvent
           })
         }
       },

website/layouts/default/index.js

@@ -34,7 +34,7 @@ export function Layout({
     window.scrollTo(0, 0)
     const lenis = new Lenis({
       // gestureOrientation: 'both',
-      // smoothWheel: false,
+      smoothWheel: true,
       // smoothTouch: true,
       syncTouch: true,
     })
@@ -96,7 +96,7 @@ export function Layout({
 
   useFrame((time) => {
     lenis?.raf(time)
-  }, [])
+  }, 0)
 
   return (
     <>

website/pages/home/index.js

@@ -1,4 +1,4 @@
-import { useRect } from '@studio-freight/hamo'
+import { useFrame, useRect } from '@studio-freight/hamo'
 import cn from 'clsx'
 
 import { Button } from 'components/button'
@@ -186,9 +186,12 @@ export default function Home() {
 
   useScroll((e) => {
     console.log(window.scrollY, e.scroll, e.isScrolling, e.velocity, e.isLocked)
-    // console.log(e.isScrolling)
   })
 
+  useFrame(() => {
+    console.log('frame', window.scrollY, lenis?.scroll, lenis?.isScrolling)
+  }, 1)
+
   const inUseRef = useRef()
 
   const [visible, setIsVisible] = useState(false)