@linear_non/stellar-libs 1.2.9 → 1.3.1

package/package.json

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

package/src/CursorTracker/index.js

@@ -1,5 +1,6 @@
 import { lerp } from "@linear_non/stellar-kit/utils"
 import { gsap } from "@linear_non/stellar-kit/gsap"
+import { emitter, EVENTS } from "@linear_non/stellar-kit/events"
 
 export default class CursorTracker {
   constructor({ container, el, ease = 0.12, isCentered = true }) {
@@ -22,7 +23,7 @@ export default class CursorTracker {
   }
 
   // GLOBAL TICK
-  tick({ mouse }) {
+  tick = ({ mouse }) => {
     if (!this.isHovering) return
 
     this.target.x = mouse.x
@@ -52,6 +53,7 @@ export default class CursorTracker {
 
     this.container.addEventListener("mouseenter", this.hoverIn)
     this.container.addEventListener("mouseleave", this.hoverOut)
+    emitter.on(EVENTS.APP_TICK, this.tick)
   }
 
   off() {
@@ -59,6 +61,7 @@ export default class CursorTracker {
 
     this.container.removeEventListener("mouseenter", this.hoverIn)
     this.container.removeEventListener("mouseleave", this.hoverOut)
+    emitter.off(EVENTS.APP_TICK, this.tick)
   }
 
   destroy() {

package/src/Marquee/index.js

@@ -1,4 +1,5 @@
 import { gsap } from "@linear_non/stellar-kit/gsap"
+import { emitter, EVENTS } from "@linear_non/stellar-kit/events"
 
 export default class Marquee {
   constructor({ container, el, speed = 50, gap = "1.6rem" }) {
@@ -10,7 +11,7 @@ export default class Marquee {
     this.init()
   }
 
-  setup() {
+  setup = () => {
     if (this.tween) this.tween.kill()
 
     gsap.set(this.container, {
@@ -69,13 +70,11 @@ export default class Marquee {
   }
 
   on() {
-    this._onResize = () => this.setup()
-    window.addEventListener("resize", this._onResize)
+    emitter.on(EVENTS.APP_RESIZE, this.setup)
   }
 
   off() {
-    if (this._onResize) window.removeEventListener("resize", this._onResize)
-    this._onResize = null
+    emitter.off(EVENTS.APP_RESIZE, this.setup)
   }
 
   destroy() {

package/src/ScrollBar/index.js

@@ -61,8 +61,8 @@ export default class Scrollbar {
 
   calcScroll(e) {
     const delta = e.clientY * this.state.scale
-    Raf.target = delta
-    Raf.clampTarget()
+    kitStore.raf.scroll.target = delta
+    kitStore.raf.clamp()
   }
 
   create() {

package/src/index.js

@@ -1,9 +1,9 @@
 import Sticky from "./Sticky"
 import Smooth from "./Smooth"
-import SplitonScroll from "./SplitOnScroll"
+import SplitOnScroll from "./SplitOnScroll"
 import Noise from "./Noise"
 import SpritePlayer from "./SpritePlayer"
 import CursorTracker from "./CursorTracker"
 import Marquee from "./Marquee"
 
-export { Sticky, Smooth, SplitonScroll, Noise, SpritePlayer, CursorTracker, Marquee }
+export { Sticky, Smooth, SplitOnScroll, Noise, SpritePlayer, CursorTracker, Marquee }