@linear_non/stellar-kit 2.0.1 → 2.1.2

package/events/Resize.js

@@ -2,7 +2,8 @@
 import { sizes, flags, breakpoints } from "../kitStore"
 import emitter, { EVENTS } from "./Emitter"
 import debounce from "lodash.debounce"
-import { sniffer, getWindowSizes, getViewport, setViewportHeight } from "../utils"
+import { sniffer, getWindowSizes, getViewport, setViewportHeight, raf2 } from "../utils"
+import { ScrollTrigger } from "../libraries/gsap"
 
 export default class Resize {
   constructor() {
@@ -35,7 +36,14 @@ export default class Resize {
     this.reloadIfBreakpointChanged()
 
     emitter.emit(EVENTS.APP_RESIZE)
+    ScrollTrigger.refresh()
+    flags.isResizing = false
+  }
 
+  onLoadOnce = () => {
+    flags.isResizing = true
+    emitter.emit(EVENTS.APP_RESIZE)
+    ScrollTrigger.refresh()
     flags.isResizing = false
   }
 
@@ -64,6 +72,7 @@ export default class Resize {
 
   on() {
     window.addEventListener("resize", debounce(this.onResize, 200))
+    window.addEventListener("load", this.onLoadOnce, { once: true })
   }
 
   init() {

package/kitStore.js

@@ -14,6 +14,7 @@ export const flags = {
   isFocus: false,
   isSmooth: false,
   isResizing: false,
+  isDebug: false,
   // ... optionally others
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linear_non/stellar-kit",
-  "version": "2.0.1",
+  "version": "2.1.2",
   "description": "Stellar frontend core for Non-Linear Studio projects.",
   "main": "index.js",
   "exports": {

package/plugins/Observer.js

@@ -49,7 +49,6 @@ export default class Observer extends Emitter {
     return this
   }
 
-  // Update common vars at runtime (then refresh)
   update({ start, end, scrub, markers } = {}) {
     if (!this.st) return this
     if (start !== undefined) this.st.vars.start = start
@@ -60,7 +59,6 @@ export default class Observer extends Emitter {
     return this
   }
 
-  // Clean up GSAP + all listeners from Emitter
   kill() {
     this.st?.kill()
     this.st = null

package/utils/index.js

@@ -6,3 +6,4 @@ export { sniffer } from "./sniffer"
 export { lerp, clamp, norm, round } from "./math"
 export { supportWebp, supportMouseTouch } from "./support"
 export { listener } from "./listener"
+export { raf2 } from "./timing"

package/utils/timing.js

@@ -0,0 +1,2 @@
+// utils/timing.js
+export const raf2 = cb => requestAnimationFrame(() => requestAnimationFrame(cb))