@brandocms/jupiter 3.55.0 → 4.0.0-beta.2

package/src/modules/HeroSlider/index.js

@@ -9,14 +9,12 @@
  *
  */
 
-import { gsap } from 'gsap'
-import { CSSPlugin } from 'gsap/CSSPlugin'
+import { animate } from 'motion'
 import _defaultsDeep from 'lodash.defaultsdeep'
 import prefersReducedMotion from '../../utils/prefersReducedMotion'
 import * as Events from '../../events'
 import imageIsLoaded from '../../utils/imageIsLoaded'
-
-gsap.registerPlugin(CSSPlugin)
+import { set, delayedCall } from '../../utils/motion-helpers'
 
 const DEFAULT_OPTIONS = {
   el: '[data-hero-slider]',
@@ -30,7 +28,7 @@ const DEFAULT_OPTIONS = {
   zIndex: {
     visible: 5,
     next: 4,
-    regular: 3
+    regular: 3,
   },
   transition: {
     /* how long the actual transition from slide to slide takes */
@@ -38,31 +36,32 @@ const DEFAULT_OPTIONS = {
     /* the transition type. 'parallax' or 'fade' */
     type: 'parallax',
     /* how much to scale when 'idle' */
-    scale: 1.05
+    scale: 1.05,
   },
 
-  onTransition: hs => {
+  onTransition: (hs) => {
     hs.slide('parallax')
   },
 
   onInitialize: (/* hs */) => {},
 
   onFadeIn: (hs, callback) => {
-    if (hs.slides.length > 1) {
-      gsap.to(hs.el, {
-        duration: 0.25,
-        opacity: 1,
-        onComplete: () => {
-          callback()
-        }
-      })
-    } else {
-      gsap.to(hs.el, {
-        duration: 0.25,
-        opacity: 1
-      })
+    // Get the first slide's image to start zooming during reveal
+    const firstSlideImg = hs.slides[hs._currentSlideIdx].querySelector('.hero-slide-img')
+
+    // Fade in the container
+    animate(hs.el, { opacity: 1 }, { duration: 0.25 })
+
+    // Start zoom immediately as container fades in
+    if (firstSlideImg && hs.slides.length > 1) {
+      // Animate with linear easing - MUST specify type: "tween"!
+      animate(
+        firstSlideImg,
+        { scale: [1, hs.opts.transition.scale] },
+        { type: "tween", duration: hs.opts.interval, ease: "linear" }
+      ).finished.then(callback)
     }
-  }
+  },
 }
 
 export default class HeroSlider {
@@ -85,14 +84,15 @@ export default class HeroSlider {
 
   initialize() {
     this._addResizeHandler()
+    this._addVisibilityHandler()
     // style the container
-    gsap.set(this.el, {
+    set(this.el, {
       position: 'absolute',
       top: 0,
       left: 0,
       width: '100%',
       height: '100%',
-      overflow: 'hidden'
+      overflow: 'hidden',
     })
 
     this.slides = this.el.querySelectorAll('[data-hero-slide]')
@@ -102,31 +102,39 @@ export default class HeroSlider {
     this._currentSlideIdx = this.opts.initialSlideNumber
 
     // style the slides
-    Array.from(this.slides).forEach(s => {
-      gsap.set(s, {
+    Array.from(this.slides).forEach((s, index) => {
+      set(s, {
         zIndex: this.opts.zIndex.regular,
         position: 'absolute',
         top: 0,
         left: 0,
         width: '100%',
-        height: '100%'
+        height: '100%',
+        opacity: index === 0 ? 1 : 0, // Only first slide visible initially
       })
 
       const img = s.querySelector('.hero-slide-img')
 
       if (img) {
-        gsap.set(img, {
+        set(img, {
           width: document.body.clientWidth,
           height: '100%',
           top: 0,
           left: 0,
-          position: 'absolute'
+          position: 'absolute',
+          transition: 'none',
+          transformOrigin: 'center center',
+          willChange: 'transform',
+          scale: 1, // Initialize scale
         })
       } else {
-        console.error('==> JUPITER/HEROSLIDER: MISSING .hero-slide-img INSIDE [data-hero-slide]')
+        console.error(
+          '==> JUPITER/HEROSLIDER: MISSING .hero-slide-img INSIDE [data-hero-slide]'
+        )
       }
     })
 
+    // Set proper z-indexes for first two slides
     this.slides[0].style.zIndex = this.opts.zIndex.visible
     if (this.slides[1]) {
       this.slides[1].style.zIndex = this.opts.zIndex.next
@@ -180,91 +188,147 @@ export default class HeroSlider {
    * Switches between slides
    */
   slide(type) {
-    const timeline = gsap.timeline()
-
     switch (type) {
       case 'fade':
-        timeline
-          .set(this._currentSlide, {
+        {
+          // Setup: set current slide invisible at correct z-index
+          set(this._currentSlide, {
             opacity: 0,
-            scale: 1,
-            zIndex: this.opts.zIndex.visible
-          })
-          .set(this._nextSlide, {
-            opacity: 0
-          })
-          .to(this._previousSlide, {
-            duration: this.opts.interval,
-            scale: this.opts.transition.scale
-          })
-          .to(this._currentSlide, {
-            duration: this.opts.transition.duration,
-            opacity: 1,
-            delay: this.opts.interval - this.opts.transition.duration,
-            force3D: true,
-            ease: 'sine.inOut'
+            zIndex: this.opts.zIndex.visible,
           })
-          .set(this._previousSlide, {
-            opacity: 0
+          set(this._nextSlide, { opacity: 0 })
+
+          // Get the images to animate
+          const previousSlideImg = this._previousSlide.querySelector('.hero-slide-img')
+          const currentSlideImg = this._currentSlide.querySelector('.hero-slide-img')
+
+          // Explicitly set starting scale for current slide
+          set(currentSlideImg, { scale: 1 })
+
+          // Build animation sequence
+          // Previous slide continues zooming at same rate during fade out
+          // Zoom rate: (scale - 1) / interval, so in transition.duration we zoom by that rate * duration
+          const zoomRate = (this.opts.transition.scale - 1) / this.opts.interval
+          const continueZoomAmount = zoomRate * this.opts.transition.duration
+          const continueZoomTarget = this.opts.transition.scale + continueZoomAmount
+
+          const sequence = [
+            // Previous slide continues zooming during fade at same rate
+            [
+              previousSlideImg,
+              { scale: [this.opts.transition.scale, continueZoomTarget] },
+              { type: "tween", duration: this.opts.transition.duration, ease: "linear", at: 0 },
+            ],
+            // Current slide fade-in (starts immediately)
+            [
+              this._currentSlide,
+              { opacity: 1 },
+              {
+                type: "tween",
+                duration: this.opts.transition.duration,
+                ease: [0.45, 0, 0.55, 1], // sine.inOut bezier
+                at: 0,
+              },
+            ],
+            // Current slide image zoom (starts immediately as it fades in)
+            [
+              currentSlideImg,
+              { scale: [1, this.opts.transition.scale] },
+              { type: "tween", duration: this.opts.interval, ease: "linear", at: 0 },
+            ],
+          ]
+
+          this._currentAnimation = animate(sequence)
+
+          this._currentAnimation.finished.then(() => {
+            // Cleanup after animation completes
+            set(this._previousSlide, { opacity: 0 })
+            set(this._currentSlide, { opacity: 1 })
+            set(previousSlideImg, { scale: 1 })
+            this._nextSlide.style.zIndex = this.opts.zIndex.visible
+            this._currentSlide.style.zIndex = this.opts.zIndex.regular
+            this._previousSlide.style.zIndex = this.opts.zIndex.regular
+            this.next()
           })
-          .call(
-            () => {
-              this._nextSlide.style.zIndex = this.opts.zIndex.visible
-              this._currentSlide.style.zIndex = this.opts.zIndex.regular
-              this._previousSlide.style.zIndex = this.opts.zIndex.regular
-              this.next()
-            },
-            null,
-            this
-          )
-
+        }
         break
 
       case 'parallax':
-        timeline
-          .set(this._currentSlide, {
+        {
+          // Setup: current slide behind previous slide
+          set(this._currentSlide, {
             zIndex: this.opts.zIndex.next,
-            scale: 1.0,
-            width: '100%'
-          })
-          .fromTo(
-            this._previousSlide,
-            {
-              duration: this.opts.interval,
-              overflow: 'hidden'
-            },
-            {
-              duration: this.opts.interval,
-              scale: this.opts.transition.scale
-            }
-          )
-          .to(this._previousSlide, {
-            duration: this.opts.transition.duration,
-            width: 0,
-            ease: 'power3.in',
-            autoRound: true,
-            overwrite: 'preexisting'
-          })
-          .set(this._nextSlide, {
-            zIndex: this.opts.zIndex.next
+            width: '100%',
+            opacity: 1, // Make sure it's visible underneath
           })
-          .set(this._currentSlide, {
-            zIndex: this.opts.zIndex.visible,
-            width: '100%'
-          })
-          .set(this._previousSlide, {
-            zIndex: this.opts.zIndex.regular,
-            scale: 1.0,
-            width: '100%'
-          })
-          .call(() => {
+          set(this._previousSlide, { overflow: 'hidden' })
+
+          // Get the current slide's image to animate
+          const previousSlideImg = this._previousSlide.querySelector('.hero-slide-img')
+          const currentSlideImg = this._currentSlide.querySelector('.hero-slide-img')
+
+          // Explicitly set starting scale for current slide
+          set(currentSlideImg, { scale: 1 })
+
+          // Build animation sequence
+          // Previous slide continues zooming at same rate during collapse
+          // Zoom rate: (scale - 1) / interval, so in transition.duration we zoom by that rate * duration
+          const zoomRate = (this.opts.transition.scale - 1) / this.opts.interval
+          const continueZoomAmount = zoomRate * this.opts.transition.duration
+          const continueZoomTarget = this.opts.transition.scale + continueZoomAmount
+
+          const sequence = [
+            // Previous slide continues zooming during collapse at same rate
+            [
+              previousSlideImg,
+              { scale: [this.opts.transition.scale, continueZoomTarget] },
+              { type: "tween", duration: this.opts.transition.duration, ease: "linear", at: 0 },
+            ],
+            // Previous slide width collapse (starts immediately)
+            [
+              this._previousSlide,
+              { width: 0 },
+              {
+                type: "tween",
+                duration: this.opts.transition.duration,
+                ease: [0.895, 0.03, 0.685, 0.22], // power3.in bezier
+                at: 0,
+              },
+            ],
+            // Current slide image zoom (starts immediately as it's revealed)
+            [
+              currentSlideImg,
+              { scale: [1, this.opts.transition.scale] },
+              { type: "tween", duration: this.opts.interval, ease: "linear", at: 0 },
+            ],
+          ]
+
+          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,
+            })
+            set(this._previousSlide, {
+              zIndex: this.opts.zIndex.regular,
+              width: '100%',
+              opacity: 0, // Hide previous slide
+            })
+            // Reset previous slide image scale for next time
+            set(previousSlideImg, { scale: 1.0 })
             this.next()
           })
-
+        }
         break
 
       default:
-        console.error('==> JUPITER/HEROSLIDER: Unrecognized `opts.transition.type` option.')
+        console.error(
+          '==> JUPITER/HEROSLIDER: Unrecognized `opts.transition.type` option.'
+        )
     }
   }
 
@@ -272,13 +336,19 @@ export default class HeroSlider {
    * Add a window resize handler that resizes slide widths
    */
   _addResizeHandler() {
-    this.observer = new IntersectionObserver(entries => {
+    this.observer = new IntersectionObserver((entries) => {
       const [{ isIntersecting }] = entries
       if (isIntersecting) {
         this._resizeSlides()
-        window.addEventListener(Events.APPLICATION_RESIZE, this._resizeSlides.bind(this))
+        window.addEventListener(
+          Events.APPLICATION_RESIZE,
+          this._resizeSlides.bind(this)
+        )
       } else {
-        window.removeEventListener(Events.APPLICATION_RESIZE, this._resizeSlides.bind(this))
+        window.removeEventListener(
+          Events.APPLICATION_RESIZE,
+          this._resizeSlides.bind(this)
+        )
       }
     })
 
@@ -286,10 +356,65 @@ export default class HeroSlider {
   }
 
   _resizeSlides() {
-    gsap.to(this.images, {
-      duration: 0.15,
-      width: document.body.clientWidth,
-      overwrite: 'all'
+    // Stop any running resize animations
+    if (this.resizeAnimation) {
+      this.resizeAnimation.stop()
+    }
+
+    this.resizeAnimation = animate(
+      this.images,
+      { width: document.body.clientWidth },
+      { duration: 0.15 }
+    )
+  }
+
+  /**
+   * Add a visibility change handler to restart animations when tab becomes visible
+   */
+  _addVisibilityHandler() {
+    document.addEventListener('visibilitychange', () => {
+      if (document.hidden) {
+        // Cancel running animation when tab becomes hidden
+        if (this._currentAnimation) {
+          this._currentAnimation.cancel()
+          this._currentAnimation = null
+        }
+      } else {
+        // Reset and restart when tab becomes visible
+        this._resetAndRestart()
+      }
     })
   }
+
+  /**
+   * Reset slide states and restart the animation cycle
+   */
+  _resetAndRestart() {
+    // Reset all slides to initial state
+    Array.from(this.slides).forEach((s, index) => {
+      const nextSlideIdx = (this._currentSlideIdx + 1) % this.slides.length
+      set(s, {
+        width: '100%',
+        opacity: index === this._currentSlideIdx ? 1 : 0,
+        zIndex: index === this._currentSlideIdx ? this.opts.zIndex.visible :
+                index === nextSlideIdx ? this.opts.zIndex.next :
+                this.opts.zIndex.regular
+      })
+      const img = s.querySelector('.hero-slide-img')
+      if (img) {
+        set(img, { scale: 1 })
+      }
+    })
+
+    // Restart the zoom animation on current slide, then continue cycle
+    const currentSlideImg = this.slides[this._currentSlideIdx].querySelector('.hero-slide-img')
+    if (currentSlideImg && this.slides.length > 1) {
+      this._currentAnimation = animate(
+        currentSlideImg,
+        { scale: [1, this.opts.transition.scale] },
+        { type: "tween", duration: this.opts.interval, ease: "linear" }
+      )
+      this._currentAnimation.finished.then(() => this.next())
+    }
+  }
 }

package/src/modules/HeroVideo/index.js

@@ -1,44 +1,54 @@
 /**
- *
  * HERO VIDEO
  *
- * ## Example
+ * Module for handling hero video elements with cover images, play/pause controls,
+ * and responsive behavior.
  *
- *    const hs = HeroVideo(opts)
+ * ## Example
  *
+ *    const heroVideo = new HeroVideo(app, opts)
  */
 
-import { gsap } from 'gsap'
-import { CSSPlugin } from 'gsap/CSSPlugin'
+import { animate } from 'motion'
 import _defaultsDeep from 'lodash.defaultsdeep'
 import * as Events from '../../events'
 import prefersReducedMotion from '../../utils/prefersReducedMotion'
 import imageIsLoaded from '../../utils/imageIsLoaded'
 import Dom from '../Dom'
+import { set, animateAutoAlpha } from '../../utils/motion-helpers'
 
-gsap.registerPlugin(CSSPlugin)
+/**
+ * @typedef {Object} HeroVideoElementGenerators
+ * @property {Function} [pause] - Function that returns the pause button HTML
+ * @property {Function} [play] - Function that returns the play button HTML
+ */
 
+/**
+ * @typedef {Object} HeroVideoOptions
+ * @property {string|HTMLElement} [el='[data-hero-video]'] - Target element selector or element
+ * @property {Function} [onFadeIn] - Called when video fades in
+ * @property {Function} [onFadeInCover] - Called when cover fades in
+ * @property {Function} [onFadeOutCover] - Called when cover fades out
+ * @property {Function} [onPlayReady] - Called when video is ready to play
+ * @property {Function} [onClickPlay] - Called when play button is clicked
+ * @property {Function} [onClickPause] - Called when pause button is clicked
+ * @property {string} [pauseParent='.hero-content'] - Selector for parent element to append pause button to
+ * @property {HeroVideoElementGenerators} [elements] - Element generators for UI components
+ */
+
+/** @type {HeroVideoOptions} */
 const DEFAULT_OPTIONS = {
   el: '[data-hero-video]',
-  onFadeIn: hero => {
-    gsap.to(hero.videoDiv, {
-      duration: 1,
-      autoAlpha: 1
-    })
+  onFadeIn: (hero) => {
+    animateAutoAlpha(hero.videoDiv, 1, { duration: 1 })
   },
 
-  onFadeInCover: hero => {
-    gsap.to(hero.cover, {
-      duration: 0.35,
-      autoAlpha: 1
-    })
+  onFadeInCover: (hero) => {
+    animateAutoAlpha(hero.cover, 1, { duration: 0.35 })
   },
 
-  onFadeOutCover: hero => {
-    gsap.set(hero.cover, {
-      duration: 0.35,
-      autoAlpha: 0
-    })
+  onFadeOutCover: (hero) => {
+    animateAutoAlpha(hero.cover, 0, { duration: 0.35 })
   },
 
   onPlayReady: () => {},
@@ -57,11 +67,19 @@ const DEFAULT_OPTIONS = {
 
     play: () => `
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 350 350"><circle cx="175" cy="175" r="172.5" stroke="#000" stroke-width="10"/><path stroke="#000" stroke-width="10" d="M240 174l-112-72v148l112-76z"/></svg>
-    `
-  }
+    `,
+  },
 }
 
+/**
+ * HeroVideo component for handling responsive background videos with controls
+ */
 export default class HeroVideo {
+  /**
+   * Create a new HeroVideo instance
+   * @param {Object} app - Application instance
+   * @param {HeroVideoOptions} [opts={}] - HeroVideo options
+   */
   constructor(app, opts = {}) {
     this.app = app
     this.booting = true
@@ -86,18 +104,18 @@ export default class HeroVideo {
   initialize() {
     this._addResizeHandler()
     // style the container
-    gsap.set(this.el, {
+    set(this.el, {
       position: 'absolute',
       top: 0,
       left: 0,
       width: '100%',
       height: '100%',
-      overflow: 'hidden'
+      overflow: 'hidden',
     })
 
     this.cover = Dom.find(this.el, '[data-cover]')
     if (this.cover) {
-      gsap.set(this.cover, { autoAlpha: 0 })
+      animateAutoAlpha(this.cover, 0, { duration: 0 })
     }
 
     const pauseParent = document.querySelector(this.opts.pauseParent)
@@ -118,27 +136,30 @@ export default class HeroVideo {
     this.addEvents()
     this.setSrc()
 
-    gsap.set(this.videoDiv, {
+    set(this.videoDiv, {
       position: 'absolute',
       top: 0,
       left: 0,
       width: '100%',
       height: '100%',
-      opacity: 0
+      opacity: 0,
     })
 
     if (!this.video) {
-      console.error('==> JUPITER/HEROVIDEO: MISSING <video> INSIDE [data-hero-video-content]')
+      console.error(
+        '==> JUPITER/HEROVIDEO: MISSING <video> INSIDE [data-hero-video-content]'
+      )
       return
     }
     this.video.muted = true
 
-    gsap.set(this.video, {
-      width: document.body.clientWidth,
+    set(this.video, {
+      width: '100%',
       height: '100%',
+      objectFit: 'cover',
+      position: 'absolute',
       top: 0,
       left: 0,
-      position: 'absolute'
     })
 
     if (this.cover) {
@@ -149,7 +170,11 @@ export default class HeroVideo {
 
     window.addEventListener(Events.APPLICATION_READY, () => {
       /* Wait for the video to load, then fade in container element */
-      if (!this.video.playing && !prefersReducedMotion() && this.video.readyState >= 3) {
+      if (
+        !this.video.playing &&
+        !prefersReducedMotion() &&
+        this.video.readyState >= 3
+      ) {
         this.play()
         this.fadeIn()
         this.booting = false
@@ -188,12 +213,12 @@ export default class HeroVideo {
           this.fadeIn()
           this.booting = false
         } else {
-          gsap.set(this.videoDiv, { opacity: 1 })
+          set(this.videoDiv, { opacity: 1 })
         }
       }
     })
     if (this.elements.pause) {
-      this.elements.pause.addEventListener('click', e => {
+      this.elements.pause.addEventListener('click', (e) => {
         e.preventDefault()
         e.stopPropagation()
         if (this.playing) {
@@ -233,7 +258,7 @@ export default class HeroVideo {
   }
 
   addObserver() {
-    const observer = new IntersectionObserver(entries => {
+    const observer = new IntersectionObserver((entries) => {
       const [{ isIntersecting }] = entries
       if (isIntersecting) {
         if (this.forcePaused) {
@@ -255,13 +280,19 @@ export default class HeroVideo {
    * Add a window resize handler that resizes video width
    */
   _addResizeHandler() {
-    this.observer = new IntersectionObserver(entries => {
+    this.observer = new IntersectionObserver((entries) => {
       const [{ isIntersecting }] = entries
       if (isIntersecting) {
         this._resize()
-        window.addEventListener(Events.APPLICATION_RESIZE, this._resize.bind(this))
+        window.addEventListener(
+          Events.APPLICATION_RESIZE,
+          this._resize.bind(this)
+        )
       } else {
-        window.removeEventListener(Events.APPLICATION_RESIZE, this._resize.bind(this))
+        window.removeEventListener(
+          Events.APPLICATION_RESIZE,
+          this._resize.bind(this)
+        )
       }
     })
 
@@ -269,10 +300,7 @@ export default class HeroVideo {
   }
 
   _resize() {
-    gsap.to(this.video, {
-      duration: 0.15,
-      width: document.body.clientWidth,
-      overwrite: 'all'
-    })
+    // Video uses object-fit: cover, so no manual sizing needed
+    // This method is kept for compatibility but does nothing
   }
 }