@linear_non/stellar-kit 2.0.0 → 2.1.1

package/events/Raf.js

@@ -1,7 +1,7 @@
 // Raf.js
 import kitStore from "../kitStore"
 import emitter, { EVENTS } from "./Emitter"
-import { sniffer, lerp } from "../utils"
+import { lerp } from "../utils"
 import { gsap, ScrollTrigger } from "../libraries/gsap"
 
 export default class Raf {

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,10 +36,15 @@ export default class Resize {
     this.reloadIfBreakpointChanged()
 
     emitter.emit(EVENTS.APP_RESIZE)
-
+    ScrollTrigger.refresh()
     flags.isResizing = false
   }
 
+  onLoadOnce = () => {
+    emitter.emit(EVENTS.APP_RESIZE)
+    ScrollTrigger.refresh()
+  }
+
   reloadIfBreakpointChanged() {
     const isNowDesktop = sniffer.isDesktop
     if (this.wasDesktop !== isNowDesktop) {
@@ -64,10 +70,16 @@ export default class Resize {
 
   on() {
     window.addEventListener("resize", debounce(this.onResize, 200))
+    window.addEventListener("load", this.onLoadOnce, { once: true })
   }
 
   init() {
     this.on()
     this.onResize() // Run once on init
+
+    raf2(() => {
+      emitter.emit(EVENTS.APP_RESIZE)
+      ScrollTrigger.refresh()
+    })
   }
 }

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.0",
+  "version": "2.1.1",
   "description": "Stellar frontend core for Non-Linear Studio projects.",
   "main": "index.js",
   "exports": {

package/plugins/Observer.js

@@ -1,6 +1,6 @@
 // libs/observer/Observer.js
-import { ScrollTrigger } from "@linear_non/stellar-kit/gsap"
-import { Emitter } from "@linear_non/stellar-kit/events"
+import { ScrollTrigger } from "../libraries/gsap"
+import { Emitter } from "../events"
 
 const DEFAULTS = {
   trigger: null,
@@ -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/plugins/index.js

@@ -1,4 +1,4 @@
-import Grid from "../Grid"
+import Grid from "./Grid"
 import Observer from "./Observer"
 export { splitText, reverseSplit } from "./SplitText"
 export { Grid, Observer }

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))