@linear_non/stellar-libs 1.0.22 → 1.0.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linear_non/stellar-libs",
-  "version": "1.0.22",
+  "version": "1.0.25",
   "description": "Reusable JavaScript libraries for Non-Linear Studio projects.",
   "main": "src/index.js",
   "type": "module",
@@ -25,7 +25,7 @@
   "author": "Non-Linear Studio",
   "license": "MIT",
   "dependencies": {
-    "@linear_non/stellar-kit": "^2.1.2"
+    "@linear_non/stellar-kit": "^2.1.3"
   },
   "devDependencies": {
     "@linear_non/prettier-config": "^1.0.6",

package/src/Smooth/index.js

@@ -13,6 +13,7 @@ export default class Smooth {
     this.sections = null
     this.scrollbar = null
     this.dpr = Math.max(1, Math.round(window.devicePixelRatio || 1))
+    this.init()
   }
 
   getSections() {
@@ -99,7 +100,6 @@ export default class Smooth {
     const { vh } = kitStore.sizes
     const rect = bounds(el)
     const height = rect.height
-
     const centering = vh / 2 - height / 2
     const offset = rect.top < vh ? 0 : (rect.top - centering) * speed - (rect.top - centering)
 
@@ -136,7 +136,7 @@ export default class Smooth {
     kitStore.flags.isResizing = true
     this.scroll.setScrollBounds()
     this.elems = elems || qsa("[data-smooth]")
-    this.scrollbar.update()
+    this.scrollbar?.update()
     this.getSections()
     this.transformSections()
     kitStore.flags.isResizing = false

package/src/SplitOnScroll/index.js

@@ -6,7 +6,7 @@ export default class SplitonScroll {
   constructor({
     el,
     splitText,
-    animate,
+    isReady,
     reverse,
     start = "top bottom", // "top top+=100%",
     end = "bottom top", // "bottom bottom-=100%",
@@ -28,40 +28,22 @@ export default class SplitonScroll {
     if (!this.targets.length) return
 
     this.splits = null
-
-    this.animateCallback = animate || (() => {})
+    this.isReadyCallback = isReady || (() => {})
     this.reverseCallback = reverse || (() => {})
     this.start = start
     this.end = end
     this.scrub = scrub
     this.once = once
 
-<<<<<<< HEAD
-    // this.initScrollTrigger()
-=======
-    if (!this.splitText[0]) return
-
->>>>>>> origin
     this.addObserver()
   }
 
-  initScrollTrigger() {
-    this.myScrollTrigger = ScrollTrigger.create({
-      trigger: this.element,
-      start: this.start,
-      end: this.end,
-      scrub: this.scrub,
-      once: this.once,
-      onEnter: () => this.handleEnter(),
-      onLeave: () => this.handleLeave(),
-    })
-  }
-
   addObserver() {
     this.observer = new Observer({
       trigger: this.element,
       start: this.start,
       end: this.end,
+      once: this.once,
       scrub: this.scrub,
     })
 
@@ -69,19 +51,20 @@ export default class SplitonScroll {
     this.observer.on("leave", () => this.handleLeave())
   }
 
-  handleEnter() {
-<<<<<<< HEAD
-    const split = splitText(this.targets)
-
-=======
-    const split = splitText(this.splitText)
->>>>>>> origin
-    split.on(EVENTS.APP_SPLITTEXT_READY, splits => {
-      this.splits = splits
-      this.hasSplit = true
+  async handleEnter() {
+    if (this.splits) {
+      this.isReadyCallback(this.splits)
+      return
+    }
 
-      this.animateCallback(this.splits)
+    const split = splitText(this.targets)
+    const splits = await new Promise(resolve => {
+      split.on(EVENTS.APP_SPLITTEXT_READY, readySplits => {
+        resolve(readySplits)
+      })
     })
+    this.splits = splits
+    this.isReadyCallback(splits)
   }
 
   handleLeave() {
@@ -102,7 +85,6 @@ export default class SplitonScroll {
 
   destroy() {
     this.observer?.kill()
-
     this.splits = null
     this.targets = null
     this.element = null

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()
   }
 }