@brandocms/jupiter 4.0.0-beta.1 → 4.0.0-beta.2

package/src/modules/Dropdown/index.js

@@ -1,6 +1,7 @@
-import { gsap } from 'gsap/all'
+import { animate, stagger } from 'motion'
 import _defaultsDeep from 'lodash.defaultsdeep'
 import Dom from '../Dom'
+import { set } from '../../utils/motion-helpers'
 
 /**
  * <ul data-dropdown>
@@ -50,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'
       )
@@ -75,78 +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.05,
-        },
-        'open'
-      )
-      .to(
-        this.elements.menu,
-        {
-          height: 'auto',
-          duration: 0.05,
-        },
-        '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')
-        }
-
-        // Horizontal check: adjust left offset if the menu is offscreen
-        const computedStyle = window.getComputedStyle(this.elements.menu)
-        let currentLeft = parseFloat(computedStyle.left) || 0
+    if (!this.elements.menu) {
+      console.error('Dropdown menu element not found')
+      return
+    }
 
-        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,
-        duration: this.opts.menuOpenDuration,
-      })
+    // Initial setup - menu hidden with height cleared
+    this.elements.menu.style.removeProperty('height')
+    set(this.elements.menu, { display: 'none', opacity: 0 })
 
-    if (this.elements.menuItems.length) {
-      this.timeline.from(
-        this.elements.menuItems,
-        this.opts.tweens.items,
-        `open+=${this.opts.menuOpenDuration}`
-      )
+    // 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()
@@ -179,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
     }
   }
 
@@ -194,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.
@@ -211,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/all'
+import { clearProps } from '../../utils/motion-helpers'
 import Dom from '../Dom'
 import _defaultsDeep from 'lodash.defaultsdeep'
 import * as Events from '../../events'
@@ -13,9 +13,7 @@ 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()
     })
   }
@@ -61,9 +59,9 @@ export default class EqualHeightElements {
 
       if (actionables.length) {
         actionables.forEach((a) => {
-          gsap.set(a.elements, {
-            minHeight: a.height,
-            attr: { 'data-eq-height-elements-adjusted': true },
+          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,4 +1,3 @@
-import { gsap } from 'gsap/all'
 import Dom from '../Dom'
 import * as Events from '../../events'
 import imagesAreLoaded from '../../utils/imagesAreLoaded'
@@ -30,6 +29,10 @@ export default class EqualHeightImages {
       let height = 0
       const imgs = Dom.all(canvas, 'img')
 
+      if (imgs.length === 0) {
+        return
+      }
+
       imagesAreLoaded(imgs, false).then(() => {
         imgs.forEach((el) => {
           const rect = el.getBoundingClientRect()
@@ -63,7 +66,9 @@ export default class EqualHeightImages {
 
         if (actionables.length) {
           actionables.forEach((a) => {
-            gsap.set(a.elements, { minHeight: a.height })
+            a.elements.forEach((el) => {
+              el.style.minHeight = `${a.height}px`
+            })
           })
         }
       })

package/src/modules/FixedHeader/index.js

@@ -23,10 +23,11 @@
  *
  */
 
-import { gsap } from 'gsap/all'
+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
@@ -77,41 +78,42 @@ import Dom from '../Dom'
 /** @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
       })
     }
   },
@@ -154,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,
@@ -227,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]')
@@ -297,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,4 +1,4 @@
-import { gsap } from 'gsap/all'
+import { set } from '../../utils/motion-helpers'
 import _defaultsDeep from 'lodash.defaultsdeep'
 
 const DEFAULT_OPTIONS = {
@@ -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,
     })
     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