@linear_non/stellar-libs 1.0.0

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@linear_non/stellar-libs",
+  "version": "1.0.0",
+  "description": "Reusable JavaScript libraries for Non-Linear Studio projects.",
+  "main": "src/index.js",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "keywords": [
+    "non-linear",
+    "frontend",
+    "core",
+    "scroll",
+    "raf",
+    "gsap"
+  ],
+  "author": "Non-Linear Studio",
+  "license": "MIT",
+  "dependencies": {
+    "@linear_non/stellar-kit": "^1.0.7"
+  },
+  "devDependencies": {
+    "@linear_non/prettier-config": "^1.0.6",
+    "vite": "^6.3.5"
+  }
+}

package/src/ScrollBar/index.js

@@ -0,0 +1,125 @@
+// Scrollbar.js
+import { kitStore } from "@linear_non/stellar-kit";
+import { emitter, EVENTS, Raf } from "@linear_non/stellar-kit/events";
+
+export default class Scrollbar {
+  constructor(obj) {
+    this.container = obj.container || document.body;
+    this.el = null;
+    this.handle = null;
+    this.touching = false;
+
+    this.state = {
+      clicked: false,
+      scale: 0,
+      current: 0,
+    };
+    this.height = 0;
+    this.init();
+  }
+
+  init() {
+    this.create();
+    this.setBounds();
+    this.on();
+  }
+
+  on() {
+    emitter.on(EVENTS.APP_TICK, this.tick);
+    emitter.on(EVENTS.APP_RESIZE, this.resize);
+    this.handle.addEventListener("mousedown", this.mouseDown);
+    window.addEventListener("mouseup", this.mouseUp);
+    window.addEventListener("mousemove", this.mouseMove);
+  }
+
+  off() {
+    emitter.off(EVENTS.APP_TICK, this.tick);
+    emitter.off(EVENTS.APP_RESIZE, this.resize);
+    this.handle.removeEventListener("mousedown", this.mouseDown);
+    window.removeEventListener("mouseup", this.mouseUp);
+    window.removeEventListener("mousemove", this.mouseMove);
+  }
+
+  mouseDown = () => {
+    this.touching = true;
+    document.body.style.userSelect = "none";
+    document.body.style.webkitUserSelect = "none";
+    document.body.style.pointerEvents = "none";
+  };
+
+  mouseUp = () => {
+    this.touching = false;
+    document.body.style.userSelect = "inherit";
+    document.body.style.webkitUserSelect = "inherit";
+    document.body.style.pointerEvents = "inherit";
+  };
+
+  mouseMove = (e) => {
+    if (this.touching === true) {
+      const { isLocked } = kitStore.flags;
+
+      if (isLocked) return;
+
+      kitStore.raf.scroll.target = e.clientY * this.state.scale;
+      kitStore.raf.clamp();
+    }
+  };
+
+  setBounds() {
+    const { vh, fh } = kitStore.sizes;
+    const scrollLimit = fh;
+    this.state.scale = (scrollLimit + vh) / vh;
+    this.handle.style.height = `${vh / this.state.scale}px`;
+  }
+
+  tick = ({ current }) => {
+    const scroll = current / this.state.scale;
+    this.state.current = scroll;
+    this.handle.style.transform = `translate3d(0, ${this.state.current}px, 0)`;
+  };
+
+  resize = () => {
+    this.setBounds();
+  };
+
+  calcScroll(e) {
+    const delta = e.clientY * this.state.scale;
+    Raf.target = delta;
+    Raf.clampTarget();
+  }
+
+  create() {
+    this.el = document.createElement("div");
+    this.handle = document.createElement("div");
+    this.el.classList.add("scrollbar");
+    this.handle.classList.add("handle");
+
+    Object.assign(this.el.style, {
+      position: "fixed",
+      top: 0,
+      right: 0,
+      height: "100%",
+      pointerEvents: "all",
+    });
+
+    Object.assign(this.handle.style, {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      cursor: "pointer",
+      zIndex: 101,
+    });
+
+    this.container.appendChild(this.el);
+    this.el.appendChild(this.handle);
+  }
+
+  update() {
+    this.setBounds();
+  }
+
+  destroy() {
+    this.off();
+  }
+}

package/src/Smooth/index.js

@@ -0,0 +1,149 @@
+// Smooth.js
+import Scrollbar from "../ScrollBar";
+import { kitStore } from "@linear_non/stellar-kit";
+import { emitter, EVENTS } from "@linear_non/stellar-kit/events";
+import { qs, qsa, bounds } from "@linear_non/stellar-kit/utils";
+
+export default class Smooth {
+  constructor(obj) {
+    this.scroll = obj.scroll;
+    this.el = qs("[data-view]");
+    this.elems = null;
+    this.current = 0;
+    this.threshold = 100;
+    this.sections = null;
+    this.scrollbar = null;
+    this.init();
+  }
+
+  getSections() {
+    const { isSmooth } = kitStore.flags;
+    if (!this.elems || !isSmooth) return;
+
+    this.sections = [];
+    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);
+      let parent = el.parentNode.closest("[data-smooth]");
+
+      if (parent) {
+        this.sections.some((obj) => {
+          if (obj.el === parent) parent = obj;
+        });
+      }
+
+      this.sections.push({
+        el,
+        parent,
+        top,
+        bottom,
+        offset,
+        speed,
+        out: true,
+        transform: 0,
+      });
+    });
+  }
+
+  tick = ({ current }) => {
+    this.current = current;
+    this.transformSections();
+  };
+
+  transformSections() {
+    const { isSmooth, isResizing } = kitStore.flags;
+    if (!this.sections || !isSmooth) return;
+
+    this.sections.forEach((section) => {
+      const { isVisible, transform } = this.isVisible(section);
+
+      if (isVisible || isResizing || !section.out) {
+        section.out = !isVisible;
+        section.transform = transform;
+        section.el.style.transform = this.getTransform(transform);
+      }
+    });
+  }
+
+  isVisible(section) {
+    const { vh } = kitStore.sizes;
+    const { top, bottom, offset, speed, parent } = section;
+
+    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;
+
+    return { isVisible, transform };
+  }
+
+  getTransform(transform) {
+    return `translate3d(0, ${-transform}px, 0)`;
+  }
+
+  getVars(el, speed) {
+    const { vh } = kitStore.sizes;
+    const rect = bounds(el);
+    const centering = vh / 2 - rect.height / 2;
+    const offset =
+      rect.top < vh
+        ? 0
+        : (rect.top - centering) * speed - (rect.top - centering);
+
+    return {
+      top: rect.top + offset,
+      bottom: rect.bottom + offset,
+      offset,
+    };
+  }
+
+  resize = () => {
+    if (!this.sections) return;
+
+    this.sections.forEach((section) => {
+      section.el.style.transform = "translate3d(0, 0, 0)";
+      const { top, bottom, offset } = this.getVars(section.el, section.speed);
+      Object.assign(section, { top, bottom, offset });
+    });
+
+    emitter.emit(EVENTS.APP_SMOOTH_RESIZE);
+    this.transformSections();
+  };
+
+  update(elems) {
+    kitStore.flags.isResizing = true;
+
+    this.scroll.setScrollBounds();
+    this.elems = elems || qsa("[data-smooth]");
+    this.scrollbar.update();
+    this.getSections();
+    this.transformSections();
+
+    kitStore.flags.isResizing = false;
+  }
+
+  clean() {
+    this.elems = this.sections = null;
+  }
+
+  on() {
+    emitter.on(EVENTS.APP_TICK, this.tick);
+    emitter.on(EVENTS.APP_RESIZE, this.resize);
+  }
+
+  off() {
+    emitter.off(EVENTS.APP_TICK, this.tick);
+    emitter.off(EVENTS.APP_RESIZE, this.resize);
+  }
+
+  init(elems) {
+    this.elems = elems || qsa("[data-smooth]");
+    this.getSections();
+    this.scrollbar = new Scrollbar(this.current);
+    this.on();
+    this.update();
+  }
+}

package/src/SplitOnScroll/index.js

@@ -0,0 +1,55 @@
+import { splitText, reverseSplit } from "@linear_non/stellar-kit/utils";
+import { ScrollTrigger } from "@linear_non/stellar-kit/libraries/gsap";
+
+export default class SplitonScroll {
+  constructor({
+    el,
+    splitText,
+    animate,
+    reverse,
+    start = "top bottom", // "top top+=100%",
+    end = "bottom top", // "bottom bottom-=100%",
+    scrub = false,
+    once = true,
+  }) {
+    this.element = el;
+    this.splitText = splitText;
+    this.splits = [];
+    this.animateCallback = animate || (() => {});
+    this.reverseCallback = reverse || (() => {});
+    this.start = start;
+    this.end = end;
+    this.scrub = scrub;
+    this.once = once;
+
+    if (!this.splitText[0]) return;
+
+    this.initScrollTrigger();
+  }
+
+  initScrollTrigger() {
+    this.myScrollTrigger = ScrollTrigger.create({
+      trigger: this.element,
+      start: this.start,
+      end: this.end,
+      scrub: this.scrub,
+      once: this.once,
+      onEnter: () => this.handleEnter(),
+      onLeave: () => this.handleLeave(),
+    });
+  }
+
+  handleEnter() {
+    const split = splitText(this.splitText);
+    split.on("ready", (splits) => {
+      this.splits = [...splits];
+      this.animateCallback();
+    });
+  }
+
+  handleLeave() {
+    reverseSplit(this.splits);
+    this.reverseCallback();
+    this.myScrollTrigger.kill();
+  }
+}

package/src/Sticky/index.js

@@ -0,0 +1,123 @@
+// Sticky.js
+import { bounds } from "@linear_non/stellar-kit/utils";
+import { gsap, ScrollTrigger } from "@linear_non/stellar-kit/libraries/gsap";
+
+export default class Sticky {
+  constructor(obj) {
+    const { el, sticky, isSmooth, onUpdateCallback } = obj;
+
+    this.el = el;
+    this.sticky = sticky;
+    this.isSticky = false;
+    this.isSmooth = isSmooth;
+    this.progress = 0;
+    this.total = 0;
+    this.positionX = 0;
+    this.positionY = 0;
+    this.scrollTrigger = null;
+    this.onUpdateCallback =
+      typeof onUpdateCallback === "function" ? onUpdateCallback : null;
+
+    this.config = {
+      width: 0,
+      height: 0,
+      totalWidth: 0,
+      totalHeight: 0,
+      totalItems: 0,
+    };
+    if (!isSmooth) sticky.style.pointerEvents = "none";
+    this.init();
+  }
+
+  observer() {
+    if (this.scrollTrigger) this.scrollTrigger.kill(); // Prevent duplicate listeners
+
+    this.scrollTrigger = ScrollTrigger.create({
+      trigger: this.el,
+      start: "top top",
+      end: "bottom bottom",
+      scrub: true,
+      onEnter: () => this.toggleSticky(true),
+      onEnterBack: () => this.toggleSticky(true),
+      onLeave: () => this.toggleSticky(false, true), // ✅ Ensure totalHeight is passed
+      onLeaveBack: () => this.toggleSticky(false),
+      onUpdate: (self) => this.onUpdate(self),
+    });
+  }
+
+  toggleSticky(isSticky, hasTotalHeight = false) {
+    this.isSticky = isSticky;
+    isSticky
+      ? this.addSticky()
+      : this.removeSticky(hasTotalHeight ? this.config.totalHeight : 0);
+  }
+
+  addSticky() {
+    if (!this.sticky || this.isSmooth) return;
+    this.sticky.classList.add("-fixed");
+    gsap.set(this.sticky, { top: 0, position: "" });
+  }
+
+  removeSticky(totalHeight = 0) {
+    if (!this.sticky || this.isSmooth) return;
+    this.sticky.classList.remove("-fixed");
+    gsap.set(this.sticky, { top: `${totalHeight}px`, position: "relative" });
+  }
+
+  onUpdate(self) {
+    const { totalWidth, totalHeight } = this.config;
+    const newProgress = self.progress;
+    const newY = newProgress * totalHeight;
+    const newX = -newProgress * totalWidth;
+
+    // Only update if values change to prevent unnecessary calls
+    if (
+      this.progress !== newProgress ||
+      this.positionY !== newY ||
+      this.positionX !== newX
+    ) {
+      this.progress = newProgress;
+      this.positionY = newY;
+      this.positionX = newX;
+
+      if (this.isSmooth) {
+        gsap.set(this.sticky, { y: this.positionY });
+      }
+
+      // Call the callback function if provided
+      if (this.onUpdateCallback) {
+        this.onUpdateCallback({
+          progress: this.progress,
+          positionX: this.positionX,
+          positionY: this.positionY,
+        });
+      }
+    }
+  }
+
+  resize() {
+    if (!this.sticky) return;
+
+    // Get the viewport height dynamically instead of using store
+    const vh = window.innerHeight;
+    let stickyRect = bounds(this.el);
+
+    Object.assign(this.config, {
+      totalHeight: stickyRect.height - vh,
+    });
+  }
+
+  destroy() {
+    if (this.scrollTrigger) {
+      this.scrollTrigger.kill();
+      this.scrollTrigger = null;
+    }
+    this.sticky = null;
+    this.el = null;
+  }
+
+  init() {
+    this.resize();
+    this.observer();
+  }
+}

package/src/index.js

@@ -0,0 +1,4 @@
+import Sticky from "./Sticky";
+import Smooth from "./Smooth";
+
+export { Sticky, Smooth };