@linear_non/stellar-libs 1.1.8 → 1.2.0

package/package.json

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

package/src/Smooth/index.js

@@ -1,7 +1,7 @@
 import Scrollbar from "../ScrollBar"
 import { kitStore } from "@linear_non/stellar-kit"
 import { emitter, EVENTS } from "@linear_non/stellar-kit/events"
-import { qs, qsa, bounds, Debug } from "@linear_non/stellar-kit/utils"
+import { qs, qsa, bounds } from "@linear_non/stellar-kit/utils"
 
 export default class Smooth {
   constructor(obj) {
@@ -12,6 +12,7 @@ export default class Smooth {
     this.sections = null
     this.scrollbar = null
     this.dpr = Math.max(1, Math.round(window.devicePixelRatio || 1))
+    this.resizeRAF = null
 
     this.init()
   }
@@ -44,7 +45,7 @@ export default class Smooth {
         bottom,
         offset,
         speed,
-        out: true,
+        out: false,
         transform: 0,
         _roundedY: 0,
       })
@@ -109,20 +110,49 @@ export default class Smooth {
     }
   }
 
+  resetTransforms() {
+    if (!this.elems) return
+    this.elems.forEach(el => {
+      el.style.transform = ""
+    })
+  }
+
   resize = () => {
     const { isSmooth } = kitStore.flags
 
     if (!isSmooth) return
 
-    this.scroll?.setScrollBounds()
+    // Cancel any pending resize RAF
+    if (this.resizeRAF) {
+      cancelAnimationFrame(this.resizeRAF)
+      this.resizeRAF = null
+    }
 
-    const { fh } = kitStore.sizes
-    this.current = Math.min(Math.max(this.current, 0), fh || 0)
+    // Clear transforms to get accurate measurements
+    this.resetTransforms()
 
-    this.getSections()
-    emitter.emit(EVENTS.APP_SMOOTH_RESIZE)
-    this.transformSections()
-    this.scrollbar?.update()
+    // Force reflow
+    if (this.el) {
+      void this.el.offsetHeight
+    }
+
+    // Double RAF to ensure DOM has fully reflowed
+    this.resizeRAF = requestAnimationFrame(() => {
+      this.resizeRAF = requestAnimationFrame(() => {
+        this.resizeRAF = null
+
+        this.scroll?.setScrollBounds()
+
+        const { fh } = kitStore.sizes
+        this.current = Math.min(Math.max(this.current, 0), fh || 0)
+
+        this.getSections()
+
+        emitter.emit(EVENTS.APP_SMOOTH_RESIZE)
+        this.transformSections()
+        this.scrollbar?.update()
+      })
+    })
   }
 
   update(elems) {
@@ -152,6 +182,11 @@ export default class Smooth {
   }
 
   destroy() {
+    if (this.resizeRAF) {
+      cancelAnimationFrame(this.resizeRAF)
+      this.resizeRAF = null
+    }
+
     this.off()
     this.scrollbar?.destroy()
     this.clean()

package/src/SplitOnScroll/index.js

@@ -43,6 +43,7 @@ export default class SplitonScroll {
     this._readyFired = false
     this._rebuilding = false
     this._entering = false
+    this._hasEntered = false
 
     if (!this.element || !this.targets.length) {
       this._notifyReadyOnce([])
@@ -67,7 +68,7 @@ export default class SplitonScroll {
     if (this._readyFired) return
     this._readyFired = true
 
-    this.isReadyCallback(splits, groups)
+    this.isReadyCallback({ splits, groups })
     this._resolveReady?.({ splits, groups })
     this._resolveReady = null
   }
@@ -125,6 +126,7 @@ export default class SplitonScroll {
     this.splits = splits
     this.groups = groups
     this._entering = false
+    this._hasEntered = true
 
     this._notifyReadyOnce(splits, groups)
   }
@@ -149,16 +151,20 @@ export default class SplitonScroll {
     this.groups = groups
     this._rebuilding = false
 
-    this.isResizeCallback(splits, groups)
+    this.isResizeCallback({ splits, groups })
   }
 
   handleLeave() {
+    // Don't reverse if we haven't fully entered yet
+    if (!this._hasEntered) return
+
     if (this.splits) {
       reverseSplit(this.splits)
       this.splits = null
       this.groups = null
     }
 
+    this._hasEntered = false
     this.reverseCallback()
 
     if (this.once) {