@brandocms/jupiter 3.55.0 → 4.0.0-beta.2

package/src/modules/Dropdown/index.js

@@ -1,6 +1,7 @@
-import { gsap } from 'gsap'
+import { animate, stagger } from 'motion'
 import _defaultsDeep from 'lodash.defaultsdeep'
 import Dom from '../Dom'
+import { set } from '../../utils/motion-helpers'
 
 /**
  * <ul data-dropdown>
@@ -27,6 +28,8 @@ const DEFAULT_OPTIONS = {
     menu: '[data-dropdown-menu]',
     menuItems: '[data-dropdown-menu] > li',
   },
+  overlapTweens: true,
+  menuOpenDuration: 0.1,
   tweens: {
     items: {
       duration: 0.2,
@@ -48,10 +51,15 @@ export default class Dropdown {
     this.elements = {}
     this.open = false
     this.element = opts.el
-    this.timeline = gsap.timeline({ paused: true, reversed: true })
 
-    this.elements.trigger = Dom.find(this.element, this.opts.selectors.trigger)
-    if (this.elements.trigger.hasAttribute('data-dropdown-target')) {
+    // Check if the element itself is the trigger, or find it inside
+    if (this.element.matches && this.element.matches(this.opts.selectors.trigger)) {
+      this.elements.trigger = this.element
+    } else {
+      this.elements.trigger = Dom.find(this.element, this.opts.selectors.trigger)
+    }
+
+    if (this.elements.trigger && this.elements.trigger.hasAttribute('data-dropdown-target')) {
       const dropdownTarget = this.elements.trigger.getAttribute(
         'data-dropdown-target'
       )
@@ -73,75 +81,62 @@ export default class Dropdown {
   }
 
   initialize() {
-    this.timeline
-      .set(this.elements.menu, { display: 'none', clearProps: 'height' })
-      .set(this.elements.menu, { display: 'flex', opacity: 0 })
-      .from(
-        this.elements.menu,
-        {
-          className: `${this.elements.menu.className} zero-height`,
-          duration: 0.1,
-        },
-        'open'
-      )
-      .to(
-        this.elements.menu,
-        {
-          height: 'auto',
-          duration: 0.1,
-        },
-        'open'
-      )
-      .call(() => {
-        // Get current bounds and viewport dimensions
-        const menuRect = this.elements.menu.getBoundingClientRect()
-        const viewportHeight = window.innerHeight
-        const viewportWidth = window.innerWidth
-        const menuHeight = menuRect.height
-        const menuTop = menuRect.top
-
-        // Update CSS variable for height (if used in your styles)
-        Dom.setCSSVar(
-          'dropdown-menu-height',
-          `${menuHeight}px`,
-          this.elements.menu
-        )
-
-        // Vertical placement: if the menu overflows the bottom, set placement to "top"
-        if (menuHeight + menuTop > viewportHeight) {
-          this.elements.menu.setAttribute('data-dropdown-placement', 'top')
-        } else {
-          this.elements.menu.setAttribute('data-dropdown-placement', 'bottom')
-        }
+    if (!this.elements.menu) {
+      console.error('Dropdown menu element not found')
+      return
+    }
 
-        // Horizontal check: adjust left offset if the menu is offscreen
-        const computedStyle = window.getComputedStyle(this.elements.menu)
-        let currentLeft = parseFloat(computedStyle.left) || 0
+    // Initial setup - menu hidden with height cleared
+    this.elements.menu.style.removeProperty('height')
+    set(this.elements.menu, { display: 'none', opacity: 0 })
 
-        if (menuRect.left < 0) {
-          // Shift right by the amount it’s off the left edge
-          this.elements.menu.style.left = `${currentLeft - menuRect.left}px`
-        } else if (menuRect.right > viewportWidth) {
-          // Shift left by the amount it’s off the right edge
-          this.elements.menu.style.left = `${currentLeft - (menuRect.right - viewportWidth)}px`
-        }
-      })
-      .to(this.elements.menu, { opacity: 1 })
-
-    if (this.elements.menuItems.length) {
-      this.timeline.from(
-        this.elements.menuItems,
-        this.opts.tweens.items,
-        'open+=.1'
-      )
+    // Store initial menu items opacity
+    if (this.elements.menuItems && this.elements.menuItems.length) {
+      set(this.elements.menuItems, { opacity: 0 })
     }
 
     if (!this.elements.trigger) {
+      console.error('Dropdown trigger element not found')
       return
     }
     this.elements.trigger.addEventListener('click', this.onClick.bind(this))
   }
 
+  positionMenu() {
+    // Get current bounds and viewport dimensions
+    const menuRect = this.elements.menu.getBoundingClientRect()
+    const viewportHeight = window.innerHeight
+    const viewportWidth = window.innerWidth
+    const menuHeight = menuRect.height
+    const menuTop = menuRect.top
+
+    // Update CSS variable for height (if used in your styles)
+    Dom.setCSSVar(
+      'dropdown-menu-height',
+      `${menuHeight}px`,
+      this.elements.menu
+    )
+
+    // Vertical placement: if the menu overflows the bottom, set placement to "top"
+    if (menuHeight + menuTop > viewportHeight) {
+      this.elements.menu.setAttribute('data-dropdown-placement', 'top')
+    } else {
+      this.elements.menu.setAttribute('data-dropdown-placement', 'bottom')
+    }
+
+    // Horizontal check: adjust left offset if the menu is offscreen
+    const computedStyle = window.getComputedStyle(this.elements.menu)
+    let currentLeft = parseFloat(computedStyle.left) || 0
+
+    if (menuRect.left < 0) {
+      // Shift right by the amount it's off the left edge
+      this.elements.menu.style.left = `${currentLeft - menuRect.left}px`
+    } else if (menuRect.right > viewportWidth) {
+      // Shift left by the amount it's off the right edge
+      this.elements.menu.style.left = `${currentLeft - (menuRect.right - viewportWidth)}px`
+    }
+  }
+
   async onClick(event) {
     event.preventDefault()
     event.stopPropagation()
@@ -160,7 +155,11 @@ export default class Dropdown {
   async openMenu() {
     if (!this.opts.multipleActive) {
       if (this.app.currentMenu) {
-        this.app.currentMenu.closeMenu()
+        if (this.opts.overlapTweens) {
+          this.app.currentMenu.closeMenu()
+        } else {
+          await this.app.currentMenu.closeMenu()
+        }
       }
       this.app.currentMenu = this
     }
@@ -170,10 +169,30 @@ export default class Dropdown {
     // Add document click listener when menu is open.
     document.addEventListener('click', this.handleDocumentClick)
 
-    if (this.timeline.reversed()) {
-      await this.timeline.play()
-    } else {
-      await this.timeline.reverse()
+    // Show menu (display: flex, still invisible)
+    set(this.elements.menu, { display: 'flex', opacity: 0 })
+
+    // Add zero-height class for animation
+    this.elements.menu.classList.add('zero-height')
+
+    // Brief delay to let browser calculate dimensions, then remove zero-height
+    await new Promise(resolve => setTimeout(resolve, 50))
+    this.elements.menu.classList.remove('zero-height')
+
+    // Position menu based on viewport
+    this.positionMenu()
+
+    // Fade in menu
+    await animate(this.elements.menu, { opacity: 1 }, {
+      duration: this.opts.menuOpenDuration
+    }).finished
+
+    // Animate menu items if present
+    if (this.elements.menuItems.length) {
+      await animate(this.elements.menuItems, { opacity: 1 }, {
+        duration: this.opts.tweens.items.duration,
+        delay: stagger(this.opts.tweens.items.stagger)
+      }).finished
     }
   }
 
@@ -185,11 +204,27 @@ export default class Dropdown {
     // Remove the document click listener when menu closes.
     document.removeEventListener('click', this.handleDocumentClick)
 
-    if (this.timeline.reversed()) {
-      await this.timeline.play()
-    } else {
-      await this.timeline.reverse()
+    // Animate menu items out first (reverse order, faster)
+    if (this.elements.menuItems.length) {
+      await animate(this.elements.menuItems, { opacity: 0 }, {
+        duration: this.opts.tweens.items.duration * 0.5,
+      }).finished
     }
+
+    // Fade out menu
+    await animate(this.elements.menu, { opacity: 0 }, {
+      duration: this.opts.menuOpenDuration
+    }).finished
+
+    // Add zero-height class back for collapse
+    this.elements.menu.classList.add('zero-height')
+
+    // Brief delay for height animation
+    await new Promise(resolve => setTimeout(resolve, 50))
+
+    // Finally hide completely
+    set(this.elements.menu, { display: 'none' })
+    this.elements.menu.classList.remove('zero-height')
   }
 
   // Handler that checks if a click was outside the dropdown element.
@@ -202,7 +237,7 @@ export default class Dropdown {
   }
 
   checkForInitialOpen() {
-    if (this.elements.trigger.hasAttribute('data-dropdown-active')) {
+    if (this.elements.trigger && this.elements.trigger.hasAttribute('data-dropdown-active')) {
       this.openMenu()
     }
   }

package/src/modules/EqualHeightElements/index.js

@@ -1,4 +1,4 @@
-import { gsap } from 'gsap'
+import { clearProps } from '../../utils/motion-helpers'
 import Dom from '../Dom'
 import _defaultsDeep from 'lodash.defaultsdeep'
 import * as Events from '../../events'
@@ -13,21 +13,21 @@ export default class EqualHeightElements {
     this.selector = selector
     this.initialize()
     window.addEventListener(Events.APPLICATION_RESIZE, () => {
-      gsap.set('[data-eq-height-elements-adjusted]', { clearProps: 'minHeight' })
+      clearProps('[data-eq-height-elements-adjusted]', 'minHeight')
       this.initialize()
     })
   }
 
   initialize() {
     const canvases = Dom.all(this.container, '[data-eq-height-elements]')
-    Array.from(canvases).forEach(canvas => {
+    Array.from(canvases).forEach((canvas) => {
       let lastTop = null
       const actionables = []
       let elements = []
       let height = 0
       const eqElements = Dom.all(canvas, this.selector)
 
-      eqElements.forEach(el => {
+      eqElements.forEach((el) => {
         const rect = el.getBoundingClientRect()
 
         if (lastTop === null) {
@@ -58,10 +58,10 @@ export default class EqualHeightElements {
       }
 
       if (actionables.length) {
-        actionables.forEach(a => {
-          gsap.set(a.elements, {
-            minHeight: a.height,
-            attr: { 'data-eq-height-elements-adjusted': true }
+        actionables.forEach((a) => {
+          a.elements.forEach(el => {
+            el.style.minHeight = `${a.height}px`
+            el.setAttribute('data-eq-height-elements-adjusted', 'true')
           })
         })
       }

package/src/modules/EqualHeightImages/index.js

@@ -1,11 +1,10 @@
-import { gsap } from 'gsap'
 import Dom from '../Dom'
 import * as Events from '../../events'
 import imagesAreLoaded from '../../utils/imagesAreLoaded'
 import _defaultsDeep from 'lodash.defaultsdeep'
 
 const DEFAULT_OPTIONS = {
-  listenForResize: true
+  listenForResize: true,
 }
 
 export default class EqualHeightImages {
@@ -23,15 +22,19 @@ export default class EqualHeightImages {
   }
 
   run() {
-    Array.from(this.canvases).forEach(canvas => {
+    Array.from(this.canvases).forEach((canvas) => {
       let lastTop = null
       const actionables = []
       let elements = []
       let height = 0
       const imgs = Dom.all(canvas, 'img')
 
+      if (imgs.length === 0) {
+        return
+      }
+
       imagesAreLoaded(imgs, false).then(() => {
-        imgs.forEach(el => {
+        imgs.forEach((el) => {
           const rect = el.getBoundingClientRect()
           const size = this.getImgSizeInfo(el)
 
@@ -62,8 +65,10 @@ export default class EqualHeightImages {
         }
 
         if (actionables.length) {
-          actionables.forEach(a => {
-            gsap.set(a.elements, { minHeight: a.height })
+          actionables.forEach((a) => {
+            a.elements.forEach((el) => {
+              el.style.minHeight = `${a.height}px`
+            })
           })
         }
       })
@@ -94,7 +99,10 @@ export default class EqualHeightImages {
   }
 
   getImgSizeInfo(img) {
-    const pos = window.getComputedStyle(img).getPropertyValue('object-position').split(' ')
+    const pos = window
+      .getComputedStyle(img)
+      .getPropertyValue('object-position')
+      .split(' ')
 
     return this.getRenderedSize(
       true,

package/src/modules/FixedHeader/index.js

@@ -23,48 +23,97 @@
  *
  */
 
-import { gsap } from 'gsap'
+import { animate, stagger } from 'motion'
 import _defaultsDeep from 'lodash.defaultsdeep'
 import * as Events from '../../events'
 import Dom from '../Dom'
+import { set } from '../../utils/motion-helpers'
 
+/**
+ * @typedef {Object} FixedHeaderEvents
+ * @property {Function} [onPin] - Called when header is pinned
+ * @property {Function} [onUnpin] - Called when header is unpinned
+ * @property {Function} [onAltBg] - Called when alternate background is applied
+ * @property {Function} [onNotAltBg] - Called when regular background is applied
+ * @property {Function} [onSmall] - Called when header becomes small
+ * @property {Function} [onNotSmall] - Called when header becomes normal size
+ * @property {Function} [onTop] - Called when page is at the top
+ * @property {Function} [onNotTop] - Called when page is not at the top
+ * @property {Function} [onBottom] - Called when page is at the bottom
+ * @property {Function} [onNotBottom] - Called when page is not at the bottom
+ * @property {Function} [onMobileMenuOpen] - Called when mobile menu opens
+ * @property {Function} [onMobileMenuClose] - Called when mobile menu closes
+ * @property {Function} [onIntersect] - Called when header intersects with an element
+ * @property {Function} [onOutline] - Called when user tabs (outline mode)
+ */
+
+/**
+ * @typedef {Object} FixedHeaderSectionOptions
+ * @property {boolean} [unPinOnResize=true] - Whether to unpin header on window resize
+ * @property {Window|HTMLElement} [canvas=window] - Scrolling element
+ * @property {string|null} [intersects=null] - Selector for elements to check intersection with
+ * @property {Function} [beforeEnter] - Called before header enters
+ * @property {Function} [enter] - Called when header enters
+ * @property {number} [enterDelay=0] - Delay before enter animation
+ * @property {number} [tolerance=3] - Scroll tolerance before triggering hide/show
+ * @property {number|string|Function} [offset=0] - Offset from top before triggering hide
+ * @property {number|string|Function} [offsetSmall=50] - Offset from top before shrinking header
+ * @property {number|string|Function} [offsetBg=200] - Offset from top before changing background color
+ * @property {string|null} [regBgColor=null] - Regular background color
+ * @property {string|null} [altBgColor=null] - Alternate background color
+ */
+
+/**
+ * @typedef {Object} FixedHeaderOptions
+ * @property {string|HTMLElement} [el='header[data-nav]'] - Header element or selector
+ * @property {string} [on=Events.APPLICATION_REVEALED] - Event to initialize on
+ * @property {boolean} [unpinOnForcedScrollStart=true] - Whether to unpin on forced scroll start
+ * @property {boolean} [pinOnForcedScrollEnd=true] - Whether to pin on forced scroll end
+ * @property {boolean} [ignoreForcedScroll=false] - Whether to ignore forced scroll events
+ * @property {boolean} [rafScroll=true] - Whether to use requestAnimationFrame for scrolling
+ * @property {FixedHeaderSectionOptions} [default] - Default options for all sections
+ * @property {Object.<string, FixedHeaderSectionOptions>} [sections] - Section-specific options
+ */
+
+/** @type {FixedHeaderEvents} */
 const DEFAULT_EVENTS = {
   onPin: (h) => {
-    gsap.to(h.el, {
+    animate(h.el, {
+      yPercent: '0'
+    }, {
       duration: 0.35,
-      yPercent: '0',
-      ease: 'sine.out',
-      autoRound: true,
+      ease: 'easeOut'
     })
   },
 
   onUnpin: (h) => {
     h._hiding = true
-    gsap.to(h.el, {
+    animate(h.el, {
+      yPercent: '-100'
+    }, {
       duration: 0.25,
-      yPercent: '-100',
-      ease: 'sine.in',
-      autoRound: true,
-      onComplete: () => {
-        h._hiding = false
-      },
+      ease: 'easeIn'
+    }).finished.then(() => {
+      h._hiding = false
     })
   },
 
   onAltBg: (h) => {
     if (h.opts.altBgColor) {
-      gsap.to(h.el, {
-        duration: 0.2,
-        backgroundColor: h.opts.altBgColor,
+      animate(h.el, {
+        backgroundColor: h.opts.altBgColor
+      }, {
+        duration: 0.2
       })
     }
   },
 
   onNotAltBg: (h) => {
     if (h.opts.regBgColor) {
-      gsap.to(h.el, {
-        duration: 0.4,
-        backgroundColor: h.opts.regBgColor,
+      animate(h.el, {
+        backgroundColor: h.opts.regBgColor
+      }, {
+        duration: 0.4
       })
     }
   },
@@ -93,6 +142,7 @@ const DEFAULT_EVENTS = {
   },
 }
 
+/** @type {FixedHeaderOptions} */
 const DEFAULT_OPTIONS = {
   el: 'header[data-nav]',
   on: Events.APPLICATION_REVEALED,
@@ -106,21 +156,28 @@ const DEFAULT_OPTIONS = {
     canvas: window,
     intersects: null,
     beforeEnter: (h) => {
-      const timeline = gsap.timeline()
-      timeline.set(h.el, { yPercent: -100 }).set(h.lis, { opacity: 0 })
+      set(h.el, { yPercent: -100 })
+      set(h.lis, { opacity: 0 })
     },
 
     enter: (h) => {
-      const timeline = gsap.timeline()
-      timeline
-        .to(h.el, {
-          duration: 1,
-          yPercent: 0,
-          delay: h.opts.enterDelay,
-          ease: 'power3.out',
-          autoRound: true,
-        })
-        .staggerTo(h.lis, 0.8, { opacity: 1, ease: 'sine.in' }, 0.1, '-=1')
+      // Header slides down
+      animate(h.el, {
+        yPercent: 0
+      }, {
+        duration: 1,
+        delay: h.opts.enterDelay,
+        ease: 'easeOut'
+      })
+
+      // Menu items fade in with stagger (starts at same time as header: '-=1' means 1s overlap)
+      animate(h.lis, {
+        opacity: 1
+      }, {
+        duration: 0.8,
+        delay: stagger(0.1, { startDelay: h.opts.enterDelay }),
+        ease: 'easeIn'
+      })
     },
 
     enterDelay: 0,
@@ -134,7 +191,15 @@ const DEFAULT_OPTIONS = {
   },
 }
 
+/**
+ * FixedHeader component for sticky navigation headers with scroll behaviors
+ */
 export default class FixedHeader {
+  /**
+   * Create a new FixedHeader instance
+   * @param {Object} app - Application instance
+   * @param {FixedHeaderOptions} [opts={}] - FixedHeader options
+   */
   constructor(app, opts = {}) {
     this.app = app
     this.mainOpts = _defaultsDeep(opts, DEFAULT_OPTIONS)
@@ -171,6 +236,7 @@ export default class FixedHeader {
     this.mobileMenuOpen = false
     this.timer = null
     this.resetResizeTimer = null
+    this.scrollSettleTimeout = null
 
     if (this.opts.intersects) {
       this.intersectingElements = Dom.all('[data-intersect]')
@@ -241,6 +307,26 @@ export default class FixedHeader {
         capture: false,
         passive: true,
       })
+
+      // Add debounced scroll listener for accurate top/bottom detection after scroll settles
+      // RAF-throttled events can lag behind actual scroll position during fast scrolls
+      window.addEventListener('scroll', () => {
+        clearTimeout(this.scrollSettleTimeout)
+        this.scrollSettleTimeout = setTimeout(() => {
+          // Get real-time scroll position after scroll has settled
+          const actualScrollY = this.opts.canvas === window || this.opts.canvas === document.body
+            ? window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
+            : this.opts.canvas.scrollTop
+
+          // Update current scroll and force accurate boundary checks
+          this.currentScrollY = actualScrollY
+          this.checkTop(true)
+          this.checkBot(true)
+        }, 100)
+      }, {
+        capture: false,
+        passive: true,
+      })
     })
 
     this.app.registerCallback(

package/src/modules/FooterReveal/index.js

@@ -1,9 +1,9 @@
-import { gsap } from 'gsap'
+import { set } from '../../utils/motion-helpers'
 import _defaultsDeep from 'lodash.defaultsdeep'
 
 const DEFAULT_OPTIONS = {
   shadow: false,
-  shadowColor: 'rgba(255, 255, 255, 1)'
+  shadowColor: 'rgba(255, 255, 255, 1)',
 }
 
 export default class FooterReveal {
@@ -14,14 +14,14 @@ export default class FooterReveal {
     const main = document.querySelector('main')
     const footer = document.querySelector('[data-footer-reveal]')
     // fix footer
-    gsap.set(footer, {
+    set(footer, {
       'z-index': -100,
       position: 'fixed',
-      bottom: 0
+      bottom: 0,
     })
     const footerHeight = footer.offsetHeight
     // add height as margin
-    gsap.set(main, { marginBottom: footerHeight })
+    set(main, { marginBottom: footerHeight })
     if (this.opts.shadow) {
       const shadowStyle = `0 50px 50px -20px ${this.opts.shadowColor}`
       main.style.mozBoxShadow = shadowStyle