@linear_non/stellar-libs 1.1.9 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linear_non/stellar-libs",
-  "version": "1.1.9",
+  "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()
   }
@@ -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()