@linear_non/stellar-libs 1.0.24 → 1.0.25

package/package.json

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

package/src/Sticky/index.js

@@ -5,13 +5,11 @@ 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
@@ -24,23 +22,26 @@ export default class Sticky {
       totalHeight: 0,
       totalItems: 0,
     }
+
     if (!isSmooth) sticky.style.pointerEvents = "none"
     this.init()
   }
 
   observer() {
-    if (this.scrollTrigger) this.scrollTrigger.kill() // Prevent duplicate listeners
+    if (this.scrollTrigger) this.scrollTrigger.kill()
 
     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),
     })
   }
 
@@ -67,17 +68,13 @@ 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,
@@ -88,18 +85,43 @@ export default class Sticky {
     }
   }
 
-  resize() {
-    if (!this.sticky) return
+  onRefresh(self) {
+    this.computeSizes()
 
-    // Get the viewport height dynamically instead of using store
+    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() {
+    if (!this.sticky) return
     const vh = window.innerHeight
-    let stickyRect = bounds(this.el)
+    const stickyRect = bounds(this.el)
+    const totalHeight = Math.max(stickyRect.height - vh, 0)
 
     Object.assign(this.config, {
-      totalHeight: stickyRect.height - vh,
+      totalHeight,
+      totalWidth: this.config.totalWidth || 0,
     })
   }
 
+  resize() {
+    this.computeSizes()
+  }
+
+  refresh() {
+    this.computeSizes()
+    if (this.scrollTrigger) this.scrollTrigger.refresh()
+  }
+
   destroy() {
     if (this.scrollTrigger) {
       this.scrollTrigger.kill()
@@ -110,7 +132,7 @@ export default class Sticky {
   }
 
   init() {
-    this.resize()
+    this.computeSizes()
     this.observer()
   }
 }