@linear_non/stellar-libs 1.2.2 → 1.2.4

package/package.json

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

package/src/Sticky/index.js

@@ -1,16 +1,17 @@
 // Sticky.js
 import { bounds } from "@linear_non/stellar-kit/utils"
 import { gsap, ScrollTrigger } from "@linear_non/stellar-kit/gsap"
-import { kitStore } from "@linear_non/stellar-kit/kitStore"
+import { kitStore } from "@linear_non/stellar-kit"
 
 export default class Sticky {
   constructor(obj) {
-    const { el, sticky, isSmooth, onUpdateCallback } = obj
+    const { el, sticky, container, isSmooth, onUpdateCallback } = obj
 
     this.el = el
     this.sticky = sticky
     this.isSticky = false
     this.isSmooth = isSmooth
+    this.container = container
     this.progress = 0
     this.total = 0
     this.positionX = 0
@@ -18,6 +19,9 @@ export default class Sticky {
     this.scrollTrigger = null
     this.onUpdateCallback = typeof onUpdateCallback === "function" ? onUpdateCallback : null
 
+    this.dpr = Math.max(1, Math.round(window.devicePixelRatio || 1))
+    this.snap = v => Math.round(v * this.dpr) / this.dpr
+
     this.config = {
       width: 0,
       height: 0,
@@ -66,8 +70,8 @@ export default class Sticky {
   onUpdate(self) {
     const { totalWidth, totalHeight } = this.config
     const newProgress = self.progress
-    const newY = newProgress * totalHeight
-    const newX = -newProgress * totalWidth
+    const newY = this.snap(newProgress * totalHeight)
+    const newX = this.snap(-newProgress * totalWidth)
 
     // Only update if values change to prevent unnecessary calls
     if (this.progress !== newProgress || this.positionY !== newY || this.positionX !== newX) {
@@ -76,7 +80,7 @@ export default class Sticky {
       this.positionX = newX
 
       if (this.isSmooth) {
-        gsap.set(this.sticky, { y: this.positionY })
+        gsap.set(this.sticky, { y: this.positionY, force3D: true })
       }
 
       // Call the callback function if provided
@@ -96,10 +100,9 @@ export default class Sticky {
     // 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,
-    })
+    let containerRect = this.container ? bounds(this.container) : null
+    this.config.totalWidth = containerRect ? this.snap(containerRect.width - vh) : 0
+    this.config.totalHeight = this.snap(stickyRect.height - vh)
   }
 
   destroy() {