@linear_non/stellar-libs 1.0.25 → 1.0.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linear_non/stellar-libs",
-  "version": "1.0.25",
+  "version": "1.0.27",
   "description": "Reusable JavaScript libraries for Non-Linear Studio projects.",
   "main": "src/index.js",
   "type": "module",

package/src/SplitOnScroll/index.js

@@ -35,7 +35,9 @@ export default class SplitonScroll {
     this.scrub = scrub
     this.once = once
 
-    this.addObserver()
+    document.fonts.ready.then(() => {
+      this.addObserver()
+    })
   }
 
   addObserver() {

package/src/Sticky/index.js

@@ -5,11 +5,13 @@ import { gsap, ScrollTrigger } from "@linear_non/stellar-kit/gsap"
 export default class Sticky {
   constructor(obj) {
     const { el, sticky, isSmooth, onUpdateCallback } = obj
+
     this.el = el
     this.sticky = sticky
     this.isSticky = false
     this.isSmooth = isSmooth
     this.progress = 0
+    this.total = 0
     this.positionX = 0
     this.positionY = 0
     this.scrollTrigger = null
@@ -22,26 +24,23 @@ export default class Sticky {
       totalHeight: 0,
       totalItems: 0,
     }
-
     if (!isSmooth) sticky.style.pointerEvents = "none"
     this.init()
   }
 
   observer() {
-    if (this.scrollTrigger) this.scrollTrigger.kill()
+    if (this.scrollTrigger) this.scrollTrigger.kill() // Prevent duplicate listeners
 
     this.scrollTrigger = ScrollTrigger.create({
       trigger: this.el,
       start: "top top",
       end: "bottom bottom",
       scrub: true,
-      invalidateOnRefresh: true,
       onEnter: () => this.toggleSticky(true),
       onEnterBack: () => this.toggleSticky(true),
       onLeave: () => this.toggleSticky(false, true),
       onLeaveBack: () => this.toggleSticky(false),
       onUpdate: self => this.onUpdate(self),
-      onRefresh: self => this.onRefresh(self),
     })
   }
 
@@ -68,13 +67,17 @@ export default class Sticky {
     const newY = newProgress * totalHeight
     const newX = -newProgress * totalWidth
 
+    // Only update if values change to prevent unnecessary calls
     if (this.progress !== newProgress || this.positionY !== newY || this.positionX !== newX) {
       this.progress = newProgress
       this.positionY = newY
       this.positionX = newX
 
-      if (this.isSmooth) gsap.set(this.sticky, { y: this.positionY })
+      if (this.isSmooth) {
+        gsap.set(this.sticky, { y: this.positionY })
+      }
 
+      // Call the callback function if provided
       if (this.onUpdateCallback) {
         this.onUpdateCallback({
           progress: this.progress,
@@ -85,43 +88,18 @@ export default class Sticky {
     }
   }
 
-  onRefresh(self) {
-    this.computeSizes()
-
-    const { totalWidth, totalHeight } = this.config
-    this.progress = self?.progress || 0
-    this.positionY = this.progress * totalHeight
-    this.positionX = -this.progress * totalWidth
-
-    if (this.isSmooth) {
-      gsap.set(this.sticky, { y: this.positionY })
-    } else {
-      if (this.isSticky) gsap.set(this.sticky, { top: 0 })
-      else gsap.set(this.sticky, { top: `${this.positionY}px` })
-    }
-  }
-
-  computeSizes() {
+  resize() {
     if (!this.sticky) return
+
+    // Get the viewport height dynamically instead of using store
     const vh = window.innerHeight
-    const stickyRect = bounds(this.el)
-    const totalHeight = Math.max(stickyRect.height - vh, 0)
+    let stickyRect = bounds(this.el)
 
     Object.assign(this.config, {
-      totalHeight,
-      totalWidth: this.config.totalWidth || 0,
+      totalHeight: stickyRect.height - vh,
     })
   }
 
-  resize() {
-    this.computeSizes()
-  }
-
-  refresh() {
-    this.computeSizes()
-    if (this.scrollTrigger) this.scrollTrigger.refresh()
-  }
-
   destroy() {
     if (this.scrollTrigger) {
       this.scrollTrigger.kill()
@@ -132,7 +110,7 @@ export default class Sticky {
   }
 
   init() {
-    this.computeSizes()
+    this.resize()
     this.observer()
   }
 }