@brandocms/jupiter 3.55.0 → 4.0.0-beta.2

package/src/modules/Marquee/index.js

@@ -1,6 +1,7 @@
-import gsap from 'gsap/gsap-core'
+import { animate } from 'motion'
 import _defaultsDeep from 'lodash.defaultsdeep'
 import Dom from '../Dom'
+import { set, clearProps } from '../../utils/motion-helpers'
 
 const DEFAULT_OPTIONS = {
   speed: 100,
@@ -11,7 +12,7 @@ const DEFAULT_OPTIONS = {
   spacer: '<span>&nbsp;&mdash;&nbsp;</span>',
 
   onReveal: marqueeEl => {
-    gsap.to(marqueeEl, { opacity: 1, ease: 'none' })
+    animate(marqueeEl, { opacity: 1 }, { ease: 'linear' })
   }
 }
 
@@ -31,7 +32,7 @@ export default class Marquee {
   }
 
   initialize() {
-    gsap.set(this.elements.$marquee, { opacity: 0 })
+    set(this.elements.$marquee, { opacity: 0 })
     window.addEventListener('APPLICATION:RESIZE', this.updateMarquee.bind(this))
     window.addEventListener('APPLICATION:REVEALED', this.revealMarquee.bind(this))
     this.updateMarquee()
@@ -57,15 +58,19 @@ export default class Marquee {
 
     this.killTweens()
     this.clearHolders()
-    this.setHeight()
     this.fillText()
+    this.setHeight()
 
     const holderWidth = this.elements.$holder.offsetWidth
     const $allHolders = Dom.all(this.elements.$el, '[data-marquee-holder]')
     const marqueeWidth = holderWidth * $allHolders.length
-    this.duration = (holderWidth + marqueeWidth) / this.opts.speed
+    // Cap duration at 40s to prevent precision issues at slow speeds
+    this.duration = Math.min(
+      (holderWidth + marqueeWidth) / this.opts.speed,
+      40
+    )
 
-    gsap.set(this.elements.$marquee, { width: marqueeWidth })
+    set(this.elements.$marquee, { width: marqueeWidth })
     this.initializeTween()
 
     if (Dom.inViewport(this.elements.$el)) {
@@ -75,29 +80,43 @@ export default class Marquee {
 
   clearHolders() {
     const $allHolders = Dom.all(this.elements.$el, '[data-marquee-holder]')
-    Array.from($allHolders).forEach(h => gsap.set(h, { clearProps: 'all' }))
+    Array.from($allHolders).forEach(h => clearProps(h, 'all'))
   }
 
   killTweens() {
     if (this.timeline) {
-      this.timeline.kill()
+      this.timeline.stop()
       this.timeline = null
     }
+    if (this.speedAnimation) {
+      this.speedAnimation.stop()
+      this.speedAnimation = null
+    }
   }
 
   initializeTween() {
     const $allHolders = Dom.all(this.elements.$el, '[data-marquee-holder]')
 
     Array.from($allHolders).forEach((h, idx) => {
-      gsap.set(h, { position: 'absolute', left: h.offsetWidth * idx })
+      set(h, {
+        position: 'absolute',
+        left: h.offsetWidth * idx,
+        transform: 'translateZ(0)',
+        willChange: 'transform'
+      })
     })
 
-    this.timeline = gsap.timeline({ paused: true })
-    this.timeline
-      .to($allHolders, { xPercent: -100, ease: 'none', duration: this.duration }, 'standard')
-      .repeat(-1)
+    this.timeline = animate(
+      $allHolders,
+      { transform: ['translateX(0) translateZ(0)', 'translateX(-100%) translateZ(0)'] },
+      { duration: this.duration, ease: 'linear', repeat: Infinity }
+    )
+    this.timeline.pause()
 
-    this.timeline.totalProgress(this.opts.startProgress)
+    // Set initial progress if specified
+    if (this.opts.startProgress > 0) {
+      this.timeline.currentTime = this.opts.startProgress * this.duration
+    }
 
     window.timeline = this.timeline
     window.marquee = this
@@ -105,45 +124,85 @@ export default class Marquee {
 
   play(rampUp = false) {
     this.playing = true
-    gsap.killTweensOf(this.timeline)
+    if (this.speedAnimation) {
+      this.speedAnimation.stop()
+    }
 
     if (rampUp) {
       this.timeline.play()
-      gsap.to(this.timeline, {
-        timeScale: 1,
-        ease: 'sine.in',
-        duration: 0.8
-      })
+      const state = { speed: this.timeline.speed || 0 }
+      this.speedAnimation = animate(
+        state,
+        { speed: 1 },
+        {
+          duration: 0.8,
+          ease: 'easeIn',
+          onUpdate: () => {
+            this.timeline.speed = state.speed
+          }
+        }
+      )
     } else {
-      this.timeline.timeScale(1)
+      this.timeline.speed = 1
       this.timeline.play()
     }
   }
 
   pause() {
     this.playing = false
-    gsap.to(this.timeline, {
-      timeScale: 0.01,
-      onComplete: () => {
+    const state = { speed: this.timeline.speed || 1 }
+    this.speedAnimation = animate(
+      state,
+      { speed: 0.01 },
+      {
+        duration: 0.8,
+        onUpdate: () => {
+          this.timeline.speed = state.speed
+        }
+      }
+    )
+    this.speedAnimation.finished.then(() => {
+      // Only pause if we're still in paused state (haven't called play() in the meantime)
+      if (!this.playing) {
         this.timeline.pause()
-      },
-      duration: 0.8
+      }
     })
   }
 
   slowDown() {
-    gsap.to(this.timeline, {
-      timeScale: 0.5,
-      duration: 0.8
-    })
+    if (this.speedAnimation) {
+      this.speedAnimation.stop()
+    }
+    const state = { speed: this.timeline.speed || 1 }
+    this.speedAnimation = animate(
+      state,
+      { speed: 0.5 },
+      {
+        duration: 0.3,
+        ease: [0.4, 0, 0.2, 1], // ease-out
+        onUpdate: () => {
+          this.timeline.speed = state.speed
+        }
+      }
+    )
   }
 
   speedUp() {
-    gsap.to(this.timeline, {
-      timeScale: 1,
-      duration: 0.8,
-      ease: 'sine.in'
-    })
+    if (this.speedAnimation) {
+      this.speedAnimation.stop()
+    }
+    const state = { speed: this.timeline.speed || 0.5 }
+    this.speedAnimation = animate(
+      state,
+      { speed: 1 },
+      {
+        duration: 0.3,
+        ease: [0.4, 0, 0.2, 1], // ease-out
+        onUpdate: () => {
+          this.timeline.speed = state.speed
+        }
+      }
+    )
   }
 
   setupObserver() {
@@ -169,12 +228,19 @@ export default class Marquee {
   }
 
   fillText() {
+    // Clear any previously set heights to get accurate measurement
+    clearProps(this.elements.$el, 'height')
+    clearProps(this.elements.$marquee, 'height')
+
     this.elements.$marquee.innerHTML = ''
     this.elements.$marquee.appendChild(this.elements.$holder)
 
     this.elements.$holder.innerHTML = ''
     this.elements.$holder.appendChild(this.elements.$item)
 
+    // Measure height of item only (marquee padding will be added by CSS)
+    this.measuredHeight = this.elements.$item.offsetHeight
+
     const textWidth = this.elements.$item.offsetWidth
     if (textWidth) {
       if (this.opts.spacer) {
@@ -199,7 +265,10 @@ export default class Marquee {
   }
 
   setHeight() {
-    const height = this.elements.$item.offsetHeight + this.opts.extraHeight
-    gsap.set(this.elements.$el, { height })
+    // Use the height measured in fillText() (before cloning) plus any extra height
+    const height = this.measuredHeight + this.opts.extraHeight
+    // Set height on both container and marquee to preserve it when holders become absolute
+    set(this.elements.$el, { height })
+    set(this.elements.$marquee, { height })
   }
 }

package/src/modules/MobileMenu/index.js

@@ -1,7 +1,21 @@
-import { gsap } from 'gsap'
+import { animate, stagger } from 'motion'
 import _defaultsDeep from 'lodash.defaultsdeep'
 import * as Events from '../../events'
+import { set, clearProps } from '../../utils/motion-helpers'
 
+/**
+ * @typedef {Object} MobileMenuOptions
+ * @property {string} [logoColor='#000'] - Color for logo when menu is open
+ * @property {string} [logoPathSelector='svg path'] - Selector for logo SVG paths
+ * @property {string} [contentSelector='section'] - Selector for menu content
+ * @property {string} [liSelector='li'] - Selector for menu items
+ * @property {string} [hamburgerColor='#000'] - Color for hamburger icon
+ * @property {Function|null} [onResize=null] - Called when window is resized
+ * @property {Function} [openTween] - Animation for opening menu
+ * @property {Function} [closeTween] - Animation for closing menu
+ */
+
+/** @type {MobileMenuOptions} */
 const DEFAULT_OPTIONS = {
   logoColor: '#000',
   logoPathSelector: 'svg path',
@@ -10,140 +24,93 @@ const DEFAULT_OPTIONS = {
   hamburgerColor: '#000',
 
   onResize: null,
-  openTween: m => {
-    const timeline = gsap.timeline()
-
+  openTween: async (m) => {
     m.hamburger.classList.toggle('is-active')
     document.body.classList.toggle('open-menu')
 
-    timeline
-      .fromTo(
-        m.bg,
-        {
-          duration: 0.35,
-          x: '0%',
-          opacity: 0,
-          height: window.innerHeight
-        },
-        {
-          duration: 0.35,
-          opacity: 1,
-          ease: 'sine.in'
-        }
-      )
-      .to(
-        m.logo,
-        {
-          duration: 0.35,
-          opacity: 0,
-          ease: 'power3.out'
-        },
-        '-=0.35'
-      )
-      .to(
-        m.header,
-        {
-          duration: 0.55,
-          backgroundColor: 'transparent',
-          ease: 'power3.out'
-        },
-        '-=0.35'
-      )
-      .call(() => {
-        m.nav.style.gridTemplateRows = 'auto 1fr'
-      })
-      .set(m.nav, { height: window.innerHeight })
-      .set(m.content, { display: 'block' })
-      .set(m.logoPath, { fill: m.opts.logoColor })
-      .set(m.logo, { xPercent: 3 })
-      .staggerFromTo(
-        m.lis,
-        {
-          duration: 1,
-          opacity: 0,
-          x: 20
-        },
-        {
-          duration: 1,
-          x: 0,
-          opacity: 1,
-          ease: 'power3.out'
-        },
-        0.05
-      )
-      .to(
-        m.logo,
-        {
-          duration: 0.55,
-          opacity: 1,
-          xPercent: 0,
-          ease: 'power3.inOut'
-        },
-        '-=1.2'
-      )
-      .call(m._emitMobileMenuOpenEvent)
+    // Set initial state for bg
+    set(m.bg, { x: '0%', opacity: 0, height: window.innerHeight })
+
+    // Parallel animations at start (0-0.35s)
+    const timeline = [
+      [m.bg, { opacity: 1 }, { duration: 0.35, ease: 'easeIn', at: 0 }],
+      [m.logo, { opacity: 0 }, { duration: 0.35, ease: 'easeOut', at: 0 }],
+      [m.header, { backgroundColor: 'transparent' }, { duration: 0.55, ease: 'easeOut', at: 0 }]
+    ]
+
+    await animate(timeline).finished
+
+    // Immediate settings
+    m.nav.style.gridTemplateRows = 'auto 1fr'
+    set(m.nav, { height: window.innerHeight })
+    Array.from(m.content).forEach(el => set(el, { display: 'block' }))
+    Array.from(m.logoPath).forEach(path => path.setAttribute('fill', m.opts.logoColor))
+    set(m.logo, { x: '3%' })
+
+    // Staggered li animations and logo animation in parallel
+    const lisAnimation = animate(
+      m.lis,
+      { opacity: [0, 1], x: [20, 0] },
+      { duration: 1, ease: 'easeOut', delay: stagger(0.05) }
+    )
+
+    const logoAnimation = animate(
+      m.logo,
+      { opacity: 1, x: ['3%', '0%'] },
+      { duration: 0.55, ease: 'easeInOut', at: 0.15 }
+    )
+
+    await Promise.all([lisAnimation.finished, logoAnimation.finished])
+
+    m._emitMobileMenuOpenEvent()
   },
 
-  closeTween: m => {
+  closeTween: async (m) => {
     document.body.classList.toggle('open-menu')
-    const timeline = gsap.timeline()
+    m.hamburger.classList.toggle('is-active')
 
-    timeline
-      .call(() => {
-        m.hamburger.classList.toggle('is-active')
-      })
-      .fromTo(
-        m.logo,
-        {
-          duration: 0.2,
-          opacity: 1,
-          xPercent: 0
-        },
-        {
-          duration: 0.2,
-          opacity: 0,
-          xPercent: 5,
-          ease: 'power3.out'
-        }
-      )
-      .set(m.logoPath, { clearProps: 'fill' })
-      .staggerTo(
-        m.lis,
-        {
-          duration: 0.5,
-          opacity: 0,
-          x: 20,
-          ease: 'power3.out'
-        },
-        0.04
-      )
-      .set(m.nav, { clearProps: 'height' })
-      .to(
-        m.bg,
-        {
-          duration: 0.25,
-          x: '100%',
-          ease: 'sine.in'
-        },
-        '-=0.3'
-      )
-      .call(() => {
-        m._emitMobileMenuClosedEvent()
-      })
-      .set(m.content, { display: 'none' })
-      .call(() => {
-        m.nav.style.gridTemplateRows = 'auto'
-      })
-      .set(m.lis, { clearProps: 'opacity' })
-      .to(m.logo, {
-        duration: 0.35,
-        opacity: 1,
-        ease: 'power3.in'
-      })
-  }
+    // Fade out logo
+    await animate(m.logo, { opacity: 0, x: '5%' }, { duration: 0.2, ease: 'easeOut' }).finished
+
+    // Clear logo fill
+    Array.from(m.logoPath).forEach(path => path.removeAttribute('fill'))
+
+    // Stagger out lis and slide bg in parallel
+    const lisAnimation = animate(
+      m.lis,
+      { opacity: 0, x: 20 },
+      { duration: 0.5, ease: 'easeOut', delay: stagger(0.04) }
+    )
+
+    // bg animation starts 0.3s before lis finish
+    // lis duration is 0.5s + last stagger delay, so starts around 0.2s
+    setTimeout(() => {
+      animate(m.bg, { x: '100%' }, { duration: 0.25, ease: 'easeIn' })
+    }, 200)
+
+    await lisAnimation.finished
+
+    // Cleanup
+    clearProps(m.nav, 'height')
+    m._emitMobileMenuClosedEvent()
+    Array.from(m.content).forEach(el => set(el, { display: 'none' }))
+    m.nav.style.gridTemplateRows = 'auto'
+    Array.from(m.lis).forEach(li => clearProps(li, 'opacity'))
+
+    // Fade logo back in
+    await animate(m.logo, { opacity: 1 }, { duration: 0.35, ease: 'easeIn' }).finished
+  },
 }
 
+/**
+ * MobileMenu component for mobile navigation menu
+ */
 export default class MobileMenu {
+  /**
+   * Create a new MobileMenu instance
+   * @param {Object} app - Application instance
+   * @param {MobileMenuOptions} [opts={}] - MobileMenu options
+   */
   constructor(app, opts = {}) {
     this.app = app
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
@@ -152,9 +119,13 @@ export default class MobileMenu {
     this.header = document.querySelector('header')
     this.bg = this.header.querySelector('.mobile-bg')
     this.logo = this.header.querySelector('figure.brand')
-    this.logoPath = this.logo ? this.logo.querySelectorAll(this.opts.logoPathSelector) : null
+    this.logoPath = this.logo
+      ? this.logo.querySelectorAll(this.opts.logoPathSelector)
+      : null
     this.menuButton = this.header.querySelector('figure.menu-button')
-    this.hamburger = this.menuButton ? this.menuButton.querySelector('.hamburger') : null
+    this.hamburger = this.menuButton
+      ? this.menuButton.querySelector('.hamburger')
+      : null
     this.hamburgerInner = this.menuButton
       ? this.menuButton.querySelector('.hamburger-inner')
       : null
@@ -163,7 +134,7 @@ export default class MobileMenu {
     this.nav = this.header.querySelector('nav')
 
     if (this.hamburger) {
-      this.hamburger.addEventListener('click', e => {
+      this.hamburger.addEventListener('click', (e) => {
         e.preventDefault()
         e.stopPropagation()
         this.toggleMenu()
@@ -198,12 +169,16 @@ export default class MobileMenu {
   }
 
   _emitMobileMenuOpenEvent() {
-    const mobileMenuOpenEvent = new window.CustomEvent(Events.APPLICATION_MOBILE_MENU_OPEN)
+    const mobileMenuOpenEvent = new window.CustomEvent(
+      Events.APPLICATION_MOBILE_MENU_OPEN
+    )
     window.dispatchEvent(mobileMenuOpenEvent)
   }
 
   _emitMobileMenuClosedEvent() {
-    const mobileMenuClosedEvent = new window.CustomEvent(Events.APPLICATION_MOBILE_MENU_CLOSED)
+    const mobileMenuClosedEvent = new window.CustomEvent(
+      Events.APPLICATION_MOBILE_MENU_CLOSED
+    )
     window.dispatchEvent(mobileMenuClosedEvent)
   }
 }