@linear_non/stellar-libs 1.0.18 → 1.0.19

package/package.json

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

package/src/Smooth/index.js

@@ -10,7 +10,6 @@ export default class Smooth {
     this.el = qs("[data-view]")
     this.elems = null
     this.current = 0
-    this.threshold = 100
     this.sections = null
     this.scrollbar = null
     this.dpr = Math.max(1, Math.round(window.devicePixelRatio || 1))
@@ -22,10 +21,20 @@ export default class Smooth {
     if (!this.elems || !isSmooth) return
 
     this.sections = []
+    let cursor = 0
+    let max = 0
+
     this.elems.forEach(el => {
       el.style.transform = "translate3d(0, 0, 0)"
       const speed = el.dataset.speed || 1
-      const { top, bottom, offset } = this.getVars(el, speed)
+      const { height, offset } = this.getVars(el, speed)
+
+      const top = cursor
+      const bottom = top + height
+
+      cursor = bottom
+      max = bottom
+
       let parent = el.parentNode.closest("[data-smooth]")
 
       if (parent) {
@@ -74,9 +83,11 @@ 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 = start < this.threshold + vh && end > -this.threshold
+
+    const isVisible = end > 0 && start < vh
 
     return { isVisible, transform }
   }
@@ -90,12 +101,13 @@ export default class Smooth {
   getVars(el, speed) {
     const { vh } = kitStore.sizes
     const rect = bounds(el)
-    const centering = vh / 2 - rect.height / 2
+    const height = rect.height
+
+    const centering = vh / 2 - height / 2
     const offset = rect.top < vh ? 0 : (rect.top - centering) * speed - (rect.top - centering)
 
     return {
-      top: rect.top + offset,
-      bottom: rect.bottom + offset,
+      height,
       offset,
     }
   }
@@ -103,9 +115,19 @@ export default class Smooth {
   resize = () => {
     if (!this.sections) return
 
+    let cursor = 0
+    let max = 0
+
     this.sections.forEach(section => {
       section.el.style.transform = "translate3d(0, 0, 0)"
-      const { top, bottom, offset } = this.getVars(section.el, section.speed)
+      const { height, offset } = this.getVars(section.el, section.speed)
+
+      const top = cursor
+      const bottom = top + height
+
+      cursor = bottom
+      max = bottom
+
       Object.assign(section, { top, bottom, offset })
     })
 
@@ -131,9 +153,11 @@ export default class Smooth {
     emitter.on(EVENTS.APP_TICK, this.tick)
     emitter.on(EVENTS.APP_RESIZE, this.resize)
 
-    window.addEventListener("load", () => this.update(), {
-      once: true,
-    })
+    if (document.readyState === "complete") {
+      this.update()
+    } else {
+      window.addEventListener("load", () => this.update(), { once: true })
+    }
   }
 
   off() {
@@ -143,11 +167,11 @@ export default class Smooth {
 
   init(elems) {
     this.elems = elems || qsa("[data-smooth]")
-    this.getSections()
+
     this.scrollbar = new Scrollbar({
       container: kitStore.currentPage,
     })
+
     this.on()
-    this.update()
   }
 }