@linear_non/stellar-libs 1.0.13 → 1.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linear_non/stellar-libs",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "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": "^1.1.9"
+    "@linear_non/stellar-kit": "^2.0.1"
   },
   "devDependencies": {
     "@linear_non/prettier-config": "^1.0.6",

package/src/SplitOnScroll/index.js

@@ -1,4 +1,4 @@
-import { splitText, reverseSplit } from "@linear_non/stellar-kit/utils"
+import { splitText, reverseSplit, Observer } from "@linear_non/stellar-kit/plugins"
 import { EVENTS } from "@linear_non/stellar-kit/events"
 import { ScrollTrigger } from "@linear_non/stellar-kit/gsap"
 
@@ -25,7 +25,9 @@ export default class SplitonScroll {
 
     if (!this.splitText[0]) return
 
-    this.initScrollTrigger()
+    // this.initScrollTrigger()
+
+    this.addObserver()
   }
 
   initScrollTrigger() {
@@ -40,7 +42,19 @@ export default class SplitonScroll {
     })
   }
 
+  addObserver() {
+    this.observer = new Observer({
+      trigger: this.element,
+      start: this.start,
+      end: this.end,
+      scrub: this.scrub,
+    })
+    this.observer.on("enter", () => this.handleEnter())
+    this.observer.on("leave", () => this.handleLeave())
+  }
+
   handleEnter() {
+    console.log("jojo")
     const split = splitText(this.splitText)
     split.on(EVENTS.APP_SPLITTEXT_READY, splits => {
       this.splits = [...splits]
@@ -51,6 +65,14 @@ export default class SplitonScroll {
   handleLeave() {
     reverseSplit(this.splits)
     this.reverseCallback()
-    this.myScrollTrigger.kill()
+    this.destroy()
+  }
+
+  update() {
+    this.observer?.refresh()
+  }
+
+  destroy() {
+    this.observer?.kill()
   }
 }

package/src/SpritePlayer/index.js

@@ -101,10 +101,20 @@ export default class SpritePlayer {
     const onProgress = e => emitter.emit("sprite:progress", { instance: this, ...e })
     emitter.on(ImageLoader.events.PROGRESS, onProgress)
 
+    const wantAlphaUrls = Array.isArray(alpha_urls) && alpha_urls.length > 0
+    const wantAlphaPath = !!(originAlpha && fileAlpha)
+
     const [images, alphaImages] = await Promise.all([
+      // base: urls[] wins; otherwise origin+file_name pattern
       make({ origin: originBase, fileName: file_name, list: urls }),
-      originAlpha && (fileAlpha || (alpha_urls && alpha_urls.length))
-        ? make({ origin: originAlpha, fileName: fileAlpha, list: alpha_urls })
+
+      // alpha: load if EITHER urls[] OR path+file is provided
+      wantAlphaUrls || wantAlphaPath
+        ? make({
+            origin: wantAlphaUrls ? null : originAlpha,
+            fileName: wantAlphaUrls ? null : fileAlpha,
+            list: wantAlphaUrls ? alpha_urls : null,
+          })
         : Promise.resolve([]),
     ])
 
@@ -144,6 +154,7 @@ export default class SpritePlayer {
     Object.assign(this.canvas, { width: rect.width, height: rect.height, rect, area, offset })
   }
 
+  // grayscale → alpha (returns a canvas)
   toAlphaFromLuma(img) {
     const w = img.naturalWidth || img.width
     const h = img.naturalHeight || img.height