@linear_non/stellar-libs 1.0.21 → 1.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linear_non/stellar-libs",
-  "version": "1.0.21",
+  "version": "1.0.24",
   "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

@@ -83,10 +83,8 @@ export default class Smooth {
     const extra = (parent && parent.transform) || 0
     const translate = this.current * speed
     const transform = translate - offset - extra
-
     const start = top - translate
     const end = bottom - translate
-
     const isVisible = end > 0 && start < vh
 
     return { isVisible, transform }
@@ -102,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)
 
@@ -139,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
@@ -152,12 +149,6 @@ export default class Smooth {
   on() {
     emitter.on(EVENTS.APP_TICK, this.tick)
     emitter.on(EVENTS.APP_RESIZE, this.resize)
-
-    if (document.readyState === "complete") {
-      this.update()
-    } else {
-      window.addEventListener("load", () => this.update(), { once: true })
-    }
   }
 
   off() {
@@ -173,5 +164,6 @@ export default class Smooth {
     })
 
     this.on()
+    this.update(this.elems)
   }
 }

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,35 +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
 
-    // this.initScrollTrigger()
     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,
     })
 
@@ -64,15 +51,20 @@ export default class SplitonScroll {
     this.observer.on("leave", () => this.handleLeave())
   }
 
-  handleEnter() {
-    const split = splitText(this.targets)
-
-    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() {
@@ -93,7 +85,6 @@ export default class SplitonScroll {
 
   destroy() {
     this.observer?.kill()
-
     this.splits = null
     this.targets = null
     this.element = null