lenis 1.1.13 → 1.1.14-dev.3

package/README.md

@@ -56,18 +56,22 @@ using scripts:
 ### Basic:
 
 ```js
-const lenis = new Lenis()
+// Initialize Lenis
+const lenis = new Lenis();
 
+// Listen for the scroll event and log the event data
 lenis.on('scroll', (e) => {
-  console.log(e)
-})
+  console.log(e);
+});
 
+// Use requestAnimationFrame to continuously update the scroll
 function raf(time) {
-  lenis.raf(time)
-  requestAnimationFrame(raf)
+  lenis.raf(time);
+  requestAnimationFrame(raf);
 }
 
-requestAnimationFrame(raf)
+requestAnimationFrame(raf);
+
 ```
 
 #### Recommended CSS:
@@ -108,19 +112,26 @@ import 'lenis/dist/lenis.css'
 
 ### GSAP ScrollTrigger:
 ```js
-const lenis = new Lenis()
+// Initialize a new Lenis instance for smooth scrolling
+const lenis = new Lenis();
 
+// Listen for the 'scroll' event and log the event data to the console
 lenis.on('scroll', (e) => {
-  console.log(e)
-})
+  console.log(e);
+});
 
-lenis.on('scroll', ScrollTrigger.update)
+// Synchronize Lenis scrolling with GSAP's ScrollTrigger plugin
+lenis.on('scroll', ScrollTrigger.update);
 
-gsap.ticker.add((time)=>{
-  lenis.raf(time * 1000)
-})
+// Add Lenis's requestAnimationFrame (raf) method to GSAP's ticker
+// This ensures Lenis's smooth scroll animation updates on each GSAP tick
+gsap.ticker.add((time) => {
+  lenis.raf(time * 1000); // Convert time from seconds to milliseconds
+});
+
+// Disable lag smoothing in GSAP to prevent any delay in scroll animations
+gsap.ticker.lagSmoothing(0);
 
-gsap.ticker.lagSmoothing(0)
 ```
 
 ### React:
@@ -147,7 +158,7 @@ See documentation for [lenis/react](https://github.com/darkroomengineering/lenis
 | `gestureOrientation`     | `string`              | `vertical`                                         | The orientation of the gestures. Can be `vertical`, `horizontal` or `both`                                                                                                                                                                                                       |
 | `syncTouch`              | `boolean`             | `false`                                            | Mimic touch device scroll while allowing scroll sync (can be unstable on iOS<16)                                                                                                                                                                                                 |
 | `syncTouchLerp`          | `number`              | `0.075`                                            | Lerp applied during `syncTouch` inertia                                                                                                                                                                                                                                          |
-| `touchInertiaMultiplier` | `number`              | `35`                                               | Manage the the strength of `syncTouch` inertia                                                                                                                                                                                                                                   |
+| `touchInertiaMultiplier` | `number`              | `35`                                               | Manage the strength of syncTouch inertia                                                                                                                                                                                                                                   |
 | `wheelMultiplier`        | `number`              | `1`                                                | The multiplier to use for mouse wheel events                                                                                                                                                                                                                                     |
 | `touchMultiplier`        | `number`              | `1`                                                | The multiplier to use for touch events                                                                                                                                                                                                                                           |
 | `infinite`               | `boolean`             | `false`                                            | Enable infinite scrolling! `syncTouch: true` is required on touch devices. ([See example](https://codepen.io/ClementRoche/pen/OJqBLod))                                                                                                                                          |
@@ -317,6 +328,8 @@ This set of hooks is curated and maintained by the darkroom.engineering team:
 - Clément Roche ([@clementroche\_](https://twitter.com/clementroche_)) – [darkroom.engineering](https://darkroom.engineering)
 - Guido Fier ([@uido15](https://twitter.com/uido15)) – [darkroom.engineering](https://darkroom.engineering)
 - Leandro Soengas ([@lsoengas](https://twitter.com/lsoengas)) - [darkroom.engineering](https://darkroom.engineering)
+- Fermin Fernandez ([@Fermin_FerBridd](https://twitter.com/Fermin_FerBridd)) - [darkroom.engineering](https://darkroom.engineering)
+- Felix Mayr ([@feledori](https://twitter.com/feledori)) - [darkroom.engineering](https://darkroom.engineering)
 - Franco Arza ([@arzafran](https://twitter.com/arzafran)) - [darkroom.engineering](https://darkroom.engineering)
 
 <br/>

package/dist/lenis-react.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
 import * as react from 'react';
 import { ReactNode, ComponentPropsWithoutRef } from 'react';
-import Lenis, { ScrollCallback, LenisOptions } from 'lenis';
+import * as Lenis from 'lenis';
+import Lenis__default, { ScrollCallback, LenisOptions } from 'lenis';
 
 type LenisContextValue = {
-    lenis: Lenis;
+    lenis: Lenis__default;
     addCallback: (callback: ScrollCallback, priority: number) => void;
     removeCallback: (callback: ScrollCallback) => void;
 };
@@ -61,10 +61,14 @@ type LenisRef = {
     /**
      * The lenis instance
      */
-    lenis?: Lenis;
+    lenis?: Lenis__default;
 };
 
-declare const LenisContext: react.Context<LenisContextValue | null>;
+/**
+ * React component to setup a Lenis instance
+ */
+declare const ReactLenis: react.ForwardRefExoticComponent<LenisProps & react.RefAttributes<LenisRef>>;
+
 /**
  * Hook to access the Lenis instance and its methods
  *
@@ -105,10 +109,6 @@ declare const LenisContext: react.Context<LenisContextValue | null>;
  *            })
  *          }
  */
-declare function useLenis(callback?: ScrollCallback, deps?: any[], priority?: number): Lenis | undefined;
-/**
- * React component to setup a Lenis instance
- */
-declare const ReactLenis: react.ForwardRefExoticComponent<LenisProps & react.RefAttributes<LenisRef>>;
+declare function useLenis(callback?: ScrollCallback, deps?: any[], priority?: number): Lenis.default | undefined;
 
-export { ReactLenis as Lenis, LenisContext, type LenisContextValue, type LenisProps, type LenisRef, ReactLenis, ReactLenis as default, useLenis };
+export { ReactLenis as Lenis, type LenisContextValue, type LenisProps, type LenisRef, ReactLenis, ReactLenis as default, useLenis };

package/dist/lenis-vue.d.ts

@@ -0,0 +1,68 @@
+import * as vue from 'vue';
+import { PropType, HTMLAttributes, Plugin } from 'vue';
+import * as lenis from 'lenis';
+import { ScrollCallback } from 'lenis';
+
+declare const VueLenis: vue.DefineComponent<{
+    root: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    autoRaf: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    rafPriority: {
+        type: PropType<number>;
+        default: number;
+    };
+    options: {
+        type: PropType<lenis.LenisOptions | undefined>;
+        default: () => {};
+    };
+    props: {
+        type: PropType<HTMLAttributes>;
+        default: () => {};
+    };
+}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | undefined, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    root: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    autoRaf: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    rafPriority: {
+        type: PropType<number>;
+        default: number;
+    };
+    options: {
+        type: PropType<lenis.LenisOptions | undefined>;
+        default: () => {};
+    };
+    props: {
+        type: PropType<HTMLAttributes>;
+        default: () => {};
+    };
+}>>, {
+    props: HTMLAttributes;
+    root: boolean;
+    autoRaf: boolean;
+    rafPriority: number;
+    options: lenis.LenisOptions | undefined;
+}, {}>;
+declare const vueLenisPlugin: Plugin;
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        'vue-lenis': typeof VueLenis;
+    }
+}
+
+declare function useLenis(callback?: ScrollCallback, priority?: number): vue.ComputedRef<lenis.default | undefined>;
+
+export { VueLenis as Lenis, VueLenis, vueLenisPlugin as default, useLenis };