@brandocms/jupiter 5.0.0-beta.2 → 5.0.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brandocms/jupiter",
-  "version": "5.0.0-beta.2",
+  "version": "5.0.0-beta.4",
   "description": "Frontend helpers.",
   "author": "Univers/Twined",
   "license": "UNLICENSED",

package/src/modules/DoubleHeader/index.js

@@ -50,7 +50,7 @@ const DEFAULT_EVENTS = {
 
   onPin: (h) => {
     animate(h.auxEl, {
-      yPercent: '0'
+      y: '0%'
     }, {
       duration: 0.35,
       ease: 'easeOut'
@@ -60,7 +60,7 @@ const DEFAULT_EVENTS = {
   onUnpin: (h) => {
     h._hiding = true
     animate(h.auxEl, {
-      yPercent: '-100'
+      y: '-100%'
     }, {
       duration: 0.25,
       ease: 'easeIn'
@@ -86,12 +86,12 @@ const DEFAULT_OPTIONS = {
     },
     enter: (h) => {
       // Set initial states
-      set(h.auxEl, { yPercent: -100 })
+      set(h.auxEl, { y: '-100%' })
       set(h.lis, { opacity: 0 })
 
       // Auxiliary header slides down
       animate(h.auxEl, {
-        yPercent: 0
+        y: '0%'
       }, {
         duration: 1,
         delay: h.opts.enterDelay,

package/src/modules/FixedHeader/index.js

@@ -79,7 +79,7 @@ import { set } from '../../utils/motion-helpers'
 const DEFAULT_EVENTS = {
   onPin: (h) => {
     animate(h.el, {
-      yPercent: '0'
+      y: '0%'
     }, {
       duration: 0.35,
       ease: 'easeOut'
@@ -89,7 +89,7 @@ const DEFAULT_EVENTS = {
   onUnpin: (h) => {
     h._hiding = true
     animate(h.el, {
-      yPercent: '-100'
+      y: '-100%'
     }, {
       duration: 0.25,
       ease: 'easeIn'
@@ -156,14 +156,14 @@ const DEFAULT_OPTIONS = {
     canvas: window,
     intersects: null,
     beforeEnter: (h) => {
-      set(h.el, { yPercent: -100 })
+      set(h.el, { y: '-100%' })
       set(h.lis, { opacity: 0 })
     },
 
     enter: (h) => {
       // Header slides down
       animate(h.el, {
-        yPercent: 0
+        y: '0%'
       }, {
         duration: 1,
         delay: h.opts.enterDelay,

package/src/modules/HeroSlider/index.js

@@ -306,20 +306,30 @@ export default class HeroSlider {
           this._currentAnimation = animate(sequence)
 
           this._currentAnimation.finished.then(() => {
-            // Cleanup and shuffle z-indexes
-            set(this._nextSlide, { zIndex: this.opts.zIndex.next, opacity: 1 })
-            set(this._currentSlide, {
-              zIndex: this.opts.zIndex.visible,
-              width: '100%',
-              opacity: 1,
+            // Reset ALL slides using instant animations to ensure Motion.js state is clean
+            Array.from(this.slides).forEach((slide) => {
+              if (slide === this._currentSlide) return
+              const img = slide.querySelector('.hero-slide-img')
+              if (img) {
+                // Use animate with duration 0 to reset Motion.js internal state
+                animate(img, { scale: 1 }, { duration: 0 })
+              }
+              const isNext = slide === this._nextSlide
+              // Reset slide using animate with duration 0
+              animate(slide, {
+                width: '100%',
+                opacity: isNext ? 1 : 0,
+              }, { duration: 0 })
+              slide.style.overflow = ''
+              slide.style.zIndex = isNext ? this.opts.zIndex.next : this.opts.zIndex.regular
             })
-            set(this._previousSlide, {
-              zIndex: this.opts.zIndex.regular,
+
+            animate(this._currentSlide, {
               width: '100%',
-              opacity: 0, // Hide previous slide
-            })
-            // Reset previous slide image scale for next time
-            set(previousSlideImg, { scale: 1.0 })
+              opacity: 1,
+            }, { duration: 0 })
+            this._currentSlide.style.zIndex = this.opts.zIndex.visible
+
             this.next()
           })
         }

package/src/modules/Looper/index.js

@@ -103,6 +103,10 @@ function horizontalLoop(app, items, config) {
   let positionUnsubscribe = null // Track position listener for cleanup
   let renderUnsubscribe = null // Track frame.render loop for cleanup
 
+  // Scroll direction tracking for wrap logic
+  let scrollDirection = 0 // -1 = backward, 0 = neutral, 1 = forward
+  let lastPositionForDirection = 0
+
   // Display elements for index/count
   let indexElements = []
   let countElements = []
@@ -163,18 +167,15 @@ function horizontalLoop(app, items, config) {
     // This prevents items from visibly moving to the back before they're off-screen
     const minRequiredWidth = containerWidth * 2.5 + maxItemWidth
 
-    // Only replicate if needed
-    if (totalWidth >= minRequiredWidth) {
-      return
-    }
-
     // Store original count to prevent exponential growth
     const originalItemCount = items.length
     const maxReplications = 10
     let count = 0
     let previousTotalWidth = totalWidth
 
-    while (totalWidth < minRequiredWidth && count < maxReplications) {
+    // Always create at least one set of clones - the wrapping logic depends on clones existing
+    // Then continue until we have enough width for seamless looping
+    while ((count === 0 || totalWidth < minRequiredWidth) && count < maxReplications) {
       // Clone ONLY original items
       for (let i = 0; i < originalItemCount; i++) {
         const clone = items[i].cloneNode(true)
@@ -390,10 +391,11 @@ function horizontalLoop(app, items, config) {
         // In reset zone but item doesn't need reset → keep current offset
         newOffset = itemWrapOffsets[i]
       } else if (itemLeft < -(widths[i] + containerWidth * 0.5)) {
-        // Item exited LEFT edge
-        // Forward drag (low boundedPos): wrap to END
-        // Backward drag (high boundedPos): don't wrap, clones fill in from right
-        newOffset = boundedPos < originalItemsWidth / 2 ? wrapOffset : 0
+        // Item exited LEFT edge - only wrap during forward scroll
+        // During reverse scroll (scrollDirection < 0), items off-screen left
+        // will naturally scroll back into view - don't wrap them
+        const isForwardScroll = scrollDirection >= 0
+        newOffset = (isForwardScroll && boundedPos < originalItemsWidth / 2) ? wrapOffset : 0
       } else if (itemLeft > containerWidth + containerWidth * 0.5) {
         // Item exited RIGHT edge
         // This shouldn't happen much, but handle it
@@ -532,6 +534,13 @@ function horizontalLoop(app, items, config) {
       // Set up boundedPos motionValue to automatically sync with position
       // This calculates the bounded position (0 to originalItemsWidth)
       const positionUnsubscribe = position.on('change', latest => {
+        // Track scroll direction for wrap logic
+        const delta = latest - lastPositionForDirection
+        if (Math.abs(delta) > 1) {
+          scrollDirection = delta > 0 ? 1 : -1
+        }
+        lastPositionForDirection = latest
+
         const bounded = ((latest % originalItemsWidth) + originalItemsWidth) % originalItemsWidth
         boundedPos.set(bounded)
       })
@@ -1165,7 +1174,8 @@ function horizontalLoop(app, items, config) {
       const currentPos = position.get()
 
       // Calculate position within current cycle (using originalItemsWidth)
-      const cyclePos = currentPos % originalItemsWidth
+      // Use proper modulo for negative positions (dragging right/backward)
+      const cyclePos = ((currentPos % originalItemsWidth) + originalItemsWidth) % originalItemsWidth
       const remainingDist = originalItemsWidth - cyclePos
       const remainingDuration = remainingDist / pixelsPerSecond
 

package/src/modules/StickyHeader/index.js

@@ -81,7 +81,7 @@ import { set } from '../../utils/motion-helpers'
 const DEFAULT_EVENTS = {
   onPin: (h) => {
     animate(h.el, {
-      yPercent: '0'
+      y: '0%'
     }, {
       duration: 0.35,
       ease: 'easeOut'
@@ -91,7 +91,7 @@ const DEFAULT_EVENTS = {
   onUnpin: (h) => {
     h._hiding = true
     animate(h.el, {
-      yPercent: '-100'
+      y: '-100%'
     }, {
       duration: 0.25,
       ease: 'easeIn'
@@ -158,14 +158,14 @@ const DEFAULT_OPTIONS = {
     canvas: window,
     intersects: null,
     beforeEnter: (h) => {
-      set(h.el, { yPercent: -100 })
+      set(h.el, { y: '-100%' })
       set(h.lis, { opacity: 0 })
     },
 
     enter: (h) => {
       // Header slides down
       animate(h.el, {
-        yPercent: 0
+        y: '0%'
       }, {
         duration: 1,
         delay: h.opts.enterDelay,

package/src/utils/motion-helpers.js

@@ -33,6 +33,8 @@ export function set(target, values) {
         transformProps.push(`translateX(${typeof value === 'number' ? value + 'px' : value})`)
       } else if (key === 'y') {
         transformProps.push(`translateY(${typeof value === 'number' ? value + 'px' : value})`)
+      } else if (key === 'yPercent') {
+        transformProps.push(`translateY(${value}%)`)
       } else if (key === 'scale') {
         transformProps.push(`scale(${value})`)
       } else if (key === 'scaleX') {