@brandocms/jupiter 3.55.0 → 4.0.0-beta.2

package/src/modules/Moonwalk/index.js

@@ -1,8 +1,7 @@
 /**
  * Vendor imports
  */
-import { gsap } from 'gsap'
-import { CSSPlugin } from 'gsap/CSSPlugin'
+import { animate, stagger } from 'motion'
 import _defaultsDeep from 'lodash.defaultsdeep'
 
 /**
@@ -12,10 +11,74 @@ import * as Events from '../../events'
 import prefersReducedMotion from '../../utils/prefersReducedMotion'
 import imageIsLoaded from '../../utils/imageIsLoaded'
 import imagesAreLoaded from '../../utils/imagesAreLoaded'
+import { set, animateAutoAlpha, delayedCall, convertEasing } from '../../utils/motion-helpers'
 import Dom from '../Dom'
 
-gsap.registerPlugin(CSSPlugin)
+/**
+ * Debug logging
+ */
+const DEBUG = false
+
+function logMoonwalk(category, message, data = {}) {
+  if (DEBUG) {
+    console.log(`[Moonwalk:${category}]`, message, data)
+  }
+}
+
+function logComputedStyle(element, props = ['opacity', 'transform']) {
+  if (DEBUG && element) {
+    const computed = window.getComputedStyle(element)
+    const values = {}
+    props.forEach((prop) => (values[prop] = computed[prop]))
+    console.log('[Moonwalk:ComputedStyle]', element, values)
+  }
+}
+
+/**
+ * @typedef {Object} MoonwalkTransition
+ * @property {Object} from - Starting properties for the transition
+ * @property {Object} to - Ending properties for the transition
+ */
+
+/**
+ * @typedef {Object} MoonwalkWalk
+ * @property {number} [startDelay=0] - Delay before the animation starts
+ * @property {number} [interval=0.15] - Time between animations in a sequence
+ * @property {number} [duration=0.65] - Duration of the animation
+ * @property {boolean|Object} [alphaTween=false] - Whether to add a separate opacity tween
+ * @property {MoonwalkTransition} transition - The transition configuration
+ * @property {string} [sectionTargets] - CSS selector for targeting elements in named sections
+ */
+
+/**
+ * @typedef {Object} MoonwalkRun
+ * @property {number} [threshold=0] - IntersectionObserver threshold
+ * @property {Function} callback - Function called when element enters viewport
+ * @property {Function} [onExit] - Function called when element exits viewport
+ * @property {boolean} [repeated=false] - Whether the run should repeat
+ * @property {string} [rootMargin] - IntersectionObserver rootMargin
+ * @property {Function} [initialize] - Function called during initialization
+ * @property {Function} [onReady] - Function called when APPLICATION_REVEALED fires, before viewport observers start
+ */
 
+/**
+ * @typedef {Object} MoonwalkOptions
+ * @property {string|Function} [on=Events.APPLICATION_REVEALED] - Event to trigger animations
+ * @property {number} [initialDelay=0.1] - Delay before starting animations
+ * @property {boolean} [clearLazyload=false] - Clear data-ll-srcset attributes
+ * @property {boolean} [clearNestedSections=true] - Remove nested data-moonwalk-section attributes
+ * @property {boolean} [clearNestedWalks=true] - Remove nested data-moonwalk attributes
+ * @property {boolean} [clearMoonwalkOnAnchors=true] - Disable animations when page loaded via anchor
+ * @property {boolean} [warnRunWithSection=true] - Warn when run and section on same element
+ * @property {string} [rootMargin='-10% 0%'] - Default IntersectionObserver rootMargin
+ * @property {number} [threshold=0] - Default IntersectionObserver threshold
+ * @property {boolean} [uniqueIds=false] - Generate unique IDs for moonwalk elements
+ * @property {boolean} [addIndexes=false] - Add index attributes to elements
+ * @property {Object.<string, MoonwalkRun>} [runs={}] - Run configurations
+ * @property {Object.<string, MoonwalkWalk>} walks - Walk configurations
+ */
+
+/** @type {MoonwalkOptions} */
 const DEFAULT_OPTIONS = {
   /**
    * If your app needs to do some initialization before the
@@ -102,7 +165,15 @@ const DEFAULT_OPTIONS = {
   },
 }
 
+/**
+ * Moonwalk animation system for scroll-based reveal animations
+ */
 export default class Moonwalk {
+  /**
+   * @param {Object} app - The application instance
+   * @param {MoonwalkOptions} [opts={}] - Configuration options
+   * @param {HTMLElement} [container=document.body] - Container element
+   */
   constructor(app, opts = {}, container = document.body) {
     this.app = app
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
@@ -293,6 +364,7 @@ export default class Moonwalk {
           el: run,
           threshold: foundRun.threshold || 0,
           initialize: foundRun.initialize,
+          onReady: foundRun.onReady,
           callback: foundRun.callback,
           onExit: foundRun.onExit,
           repeated: foundRun.repeated,
@@ -335,16 +407,15 @@ export default class Moonwalk {
       this.addIndexes(section)
     }
 
-    const timeline = gsap.timeline({
-      autoRemoveChildren: false,
-      smoothChildTiming: false,
-    })
-
     return {
       id: Math.random().toString(36).substring(7),
       el: section,
       name: section.getAttribute('data-moonwalk-section') || null,
-      timeline,
+      animation: {
+        lastDelay: 0,
+        lastDuration: 0,
+        lastStartTime: null,
+      },
       observer: null,
       stage: {
         name: section.getAttribute('data-moonwalk-stage') || null,
@@ -430,14 +501,32 @@ export default class Moonwalk {
         section.children = this.orderChildren(section.el.children)
       }
 
-      const fromTransition = sectionWalk.alphaTween
-        ? {
-            ...sectionWalk.transition.from,
-            opacity: 0,
-          }
-        : sectionWalk.transition.from
-
-      gsap.set(section.children, fromTransition)
+      // Only set initial states for JS animations (transition !== null)
+      if (sectionWalk.transition) {
+        const fromTransition = sectionWalk.alphaTween
+          ? {
+              ...sectionWalk.transition.from,
+              opacity: 0,
+            }
+          : sectionWalk.transition.from
+
+        logMoonwalk('InitialState', 'Setting initial state for named section', {
+          section: section.name,
+          childCount: section.children.length,
+          fromTransition,
+        })
+        set(section.children, fromTransition)
+
+        // Check if styles were actually applied
+        if (section.children.length > 0) {
+          logComputedStyle(section.children[0])
+        }
+      } else {
+        logMoonwalk('InitialState', 'Skipping initial state for CSS-only section', {
+          section: section.name,
+          childCount: section.children.length,
+        })
+      }
     }
 
     if (section.stage.name) {
@@ -449,7 +538,12 @@ export default class Moonwalk {
           section.stage.name
         )
       } else {
-        gsap.set(section.el, stageTween.transition.from)
+        logMoonwalk('InitialState', 'Setting stage initial state', {
+          stage: section.stage.name,
+          from: stageTween.transition.from,
+        })
+        set(section.el, stageTween.transition.from)
+        logComputedStyle(section.el)
       }
     }
 
@@ -479,12 +573,9 @@ export default class Moonwalk {
                 // run stage tween
                 const stageTween = walks[section.stage.name]
 
-                const to = {
-                  ...stageTween.transition.to,
+                animate(entry.target, stageTween.transition.to, {
                   duration: stageTween.duration,
-                }
-
-                section.timeline.to(entry.target, to, 0)
+                })
                 section.stage.firstTween = true
               }
             }
@@ -499,44 +590,75 @@ export default class Moonwalk {
                 )
               }
 
-              if (typeof tween.alphaTween === 'object') {
-                tween.alphaTween.duration = tween.alphaTween.duration
-                  ? tween.alphaTween.duration
-                  : tween.duration
-              } else if (tween.alphaTween === true) {
-                tween.alphaTween = {
-                  duration: tween.duration,
-                  ease: 'sine.in',
+              logMoonwalk('SectionObserver', 'Named section triggered', {
+                sectionName: section.name,
+                childCount: section.children.length,
+                interval: tween.interval,
+                duration: tween.duration,
+                hasAlphaTween: !!tween.alphaTween,
+                isCssOnly: !tween.transition,
+              })
+
+              // Check if this is CSS-only animation (transition: null)
+              if (!tween.transition) {
+                // CSS-only mode - stagger adding the data-moonwalked attribute
+                logMoonwalk('SectionObserver', 'Using CSS-only mode', {
+                  sectionName: section.name,
+                })
+
+                section.children.forEach((child, index) => {
+                  const delay = (tween.startDelay || 0) + index * tween.interval
+                  delayedCall(delay, () => {
+                    child.setAttribute('data-moonwalked', '')
+                  })
+                })
+              } else {
+                // JS animation mode
+                if (typeof tween.alphaTween === 'object') {
+                  tween.alphaTween.duration = tween.alphaTween.duration
+                    ? tween.alphaTween.duration
+                    : tween.duration
+                } else if (tween.alphaTween === true) {
+                  tween.alphaTween = {
+                    duration: tween.duration,
+                    ease: 'easeIn',
+                  }
                 }
-              }
 
-              if (tween.startDelay) {
-                tween.transition.to = {
-                  ...tween.transition.to,
-                  delay: tween.startDelay,
-                }
-              }
+                // Extract ease from to values and convert for Motion.js
+                const { ease: tweenEase, ...toValues } = tween.transition.to
+                const convertedEase = convertEasing(tweenEase || 'easeOut')
 
-              section.timeline.staggerTo(
-                section.children,
-                tween.duration,
-                tween.transition.to,
-                tween.interval,
-                0
-              )
+                const animationOptions = {
+                  duration: tween.duration,
+                  ease: convertedEase,
+                  delay: stagger(tween.interval, {
+                    startDelay: tween.startDelay || 0,
+                  }),
+                }
 
-              if (tween.alphaTween) {
-                section.timeline.staggerTo(
-                  section.children,
-                  tween.alphaTween.duration,
-                  {
-                    opacity: 1,
-                    ease: tween.alphaTween.ease,
-                    delay: tween.startDelay || 0,
-                  },
-                  tween.interval,
-                  0
-                )
+                logMoonwalk('SectionObserver', 'Starting stagger animation', {
+                  sectionName: section.name,
+                  to: toValues,
+                  ease: convertedEase,
+                  options: animationOptions,
+                })
+
+                animate(section.children, toValues, animationOptions)
+
+                if (tween.alphaTween) {
+                  animate(
+                    section.children,
+                    { opacity: 1 },
+                    {
+                      duration: tween.alphaTween.duration,
+                      ease: convertEasing(tween.alphaTween.ease || 'easeIn'),
+                      delay: stagger(tween.interval, {
+                        startDelay: tween.startDelay || 0,
+                      }),
+                    }
+                  )
+                }
               }
             }
 
@@ -578,6 +700,64 @@ export default class Moonwalk {
     })
   }
 
+  /**
+   * Calculate the delay for the next animation in the section.
+   * This replaces GSAP's timeline.recent() logic.
+   *
+   * @param {*} section - The section object
+   * @param {*} duration - Duration of the animation to add
+   * @param {*} overlap - How much the animations should overlap
+   * @returns {number} The delay in seconds
+   */
+  calculateDelay(section, duration, overlap) {
+    if (!section.animation.lastStartTime) {
+      // First animation in section
+      logMoonwalk('DelayCalc', 'First animation in section', { delay: 0 })
+      return 0
+    }
+
+    const now = performance.now()
+    const elapsed = (now - section.animation.lastStartTime) / 1000
+    // overlap is negative when animations should stagger (start before previous ends)
+    // So we ADD overlap (which is negative) to get the correct next start time
+    const idealNextStart =
+      section.animation.lastDelay + section.animation.lastDuration + overlap
+    const actualDelay = Math.max(0, idealNextStart - elapsed)
+
+    logMoonwalk('DelayCalc', 'Calculating delay', {
+      elapsed: elapsed.toFixed(3),
+      lastDelay: section.animation.lastDelay,
+      lastDuration: section.animation.lastDuration,
+      overlap,
+      idealNextStart,
+      actualDelay: actualDelay.toFixed(3),
+    })
+
+    return actualDelay
+  }
+
+  /**
+   * Update the animation state after adding an animation.
+   *
+   * @param {*} section - The section object
+   * @param {*} delay - The delay that was used
+   * @param {*} duration - The duration of the animation
+   */
+  updateAnimationState(section, delay, duration) {
+    const previousState = { ...section.animation }
+
+    section.animation.lastDelay = delay
+    section.animation.lastDuration = duration
+    section.animation.lastStartTime = performance.now()
+
+    logMoonwalk('StateUpdate', 'Updating animation state', {
+      delay,
+      duration,
+      previousState,
+      newState: { ...section.animation },
+    })
+  }
+
   onReady() {
     if (this.opts.initialDelay) {
       setTimeout(() => {
@@ -595,6 +775,14 @@ export default class Moonwalk {
   ready() {
     const { opts } = this
 
+    // Execute onReady callbacks for all runs
+    for (let idx = 0; idx < this.runs.length; idx += 1) {
+      const run = this.runs[idx]
+      if (run && run.onReady) {
+        run.onReady(run.el)
+      }
+    }
+
     for (let idx = 0; idx < this.runs.length; idx += 1) {
       const run = this.runs[idx]
 
@@ -637,7 +825,29 @@ export default class Moonwalk {
       }
 
       section.elements = section.el.querySelectorAll('[data-moonwalk]')
-      section.elements.forEach((box) => section.observer.observe(box))
+
+      // Only set initial states and observe individual elements for unnamed sections
+      // Named sections are observed at the section level via sectionObserver
+      if (!section.name) {
+        // Set initial states for tweenJS elements BEFORE observing
+        section.elements.forEach((element) => {
+          const walkName = element.getAttribute('data-moonwalk')
+          const cfg = !walkName.length
+            ? opts.walks.default
+            : opts.walks[walkName]
+
+          // Only set initial state if this uses tweenJS (has transition property)
+          if (cfg && cfg.transition) {
+            logMoonwalk('InitialState', 'Setting initial state for individual element', {
+              walkName: walkName || 'default',
+              from: cfg.transition.from,
+            })
+            set(element, cfg.transition.from)
+          }
+        })
+
+        section.elements.forEach((box) => section.observer.observe(box))
+      }
     }
   }
 
@@ -648,15 +858,56 @@ export default class Moonwalk {
    * @param {*} rootMargin
    */
   runObserver(run, rootMargin) {
+    // Store the previous positions of observed elements to compare for exit direction
+    const elementPositions = new WeakMap()
+
     return new IntersectionObserver(
       (entries, self) => {
         for (let i = 0; i < entries.length; i += 1) {
           const entry = entries[i]
+
+          // Store the element's current position in the viewport
+          const boundingRect = entry.boundingClientRect
+          const viewportHeight = window.innerHeight
+          const viewportWidth = window.innerWidth
+
           if (entry.isIntersecting && run.callback) {
+            // Calculate entry direction
+            let meta = { direction: null }
+            
+            // Use the app's scroll direction for reliable detection
+            // If scrollDirection is null, the element was likely revealed on initial load
+            if (this.app.state && this.app.state.scrollDirection) {
+              // Map scroll direction to viewport entry direction
+              switch (this.app.state.scrollDirection) {
+                case 'down':
+                  meta.direction = 'bottom' // When scrolling down, elements enter from bottom
+                  break
+                case 'up':
+                  meta.direction = 'top' // When scrolling up, elements enter from top
+                  break
+                case 'right':
+                  meta.direction = 'left' // When scrolling right, elements enter from left
+                  break
+                case 'left':
+                  meta.direction = 'right' // When scrolling left, elements enter from right
+                  break
+              }
+            }
+            // If no scroll direction is available, direction remains null
+            
+            // Store the element's position when it enters the viewport
+            elementPositions.set(entry.target, {
+              top: boundingRect.top,
+              bottom: boundingRect.bottom,
+              left: boundingRect.left,
+              right: boundingRect.right
+            })
+            
             const runRepeated = entry.target.hasAttribute(
               'data-moonwalk-run-triggered'
             )
-            run.callback(entry.target, runRepeated)
+            run.callback(entry.target, runRepeated, meta)
             entry.target.setAttribute('data-moonwalk-run-triggered', '')
             if (!run.onExit && !run.repeated) {
               self.unobserve(entry.target)
@@ -670,7 +921,42 @@ export default class Moonwalk {
                 'data-moonwalk-run-exit-triggered'
               )
               entry.target.setAttribute('data-moonwalk-run-exit-triggered', '')
-              run.onExit(entry.target, runExited)
+              
+              // Calculate exit direction
+              let meta = { direction: null }
+              
+              // Use the app's scroll direction for reliable detection
+              // For exit direction, it's the opposite of the entry direction for the same scroll
+              if (this.app.state && this.app.state.scrollDirection) {
+                // Map scroll direction to viewport exit direction
+                switch (this.app.state.scrollDirection) {
+                  case 'down':
+                    meta.direction = 'top' // When scrolling down, elements exit from top
+                    break
+                  case 'up':
+                    meta.direction = 'bottom' // When scrolling up, elements exit from bottom
+                    break
+                  case 'right':
+                    meta.direction = 'right' // When scrolling right, elements exit from right
+                    break
+                  case 'left':
+                    meta.direction = 'left' // When scrolling left, elements exit from left
+                    break
+                }
+              } else {
+                // If no scroll direction is available, use the simplest position-based check
+                if (boundingRect.bottom <= 0) {
+                  meta.direction = 'top'
+                } else if (boundingRect.top >= viewportHeight) {
+                  meta.direction = 'bottom'
+                } else if (boundingRect.right <= 0) {
+                  meta.direction = 'left'
+                } else if (boundingRect.left >= viewportWidth) {
+                  meta.direction = 'right'
+                }
+              }
+
+              run.onExit(entry.target, runExited, meta)
               if (!run.repeated) {
                 self.unobserve(entry.target)
               }
@@ -703,16 +989,25 @@ export default class Moonwalk {
           if (entry.isIntersecting || entry.intersectionRatio > 0) {
             section.running = true
 
-            if (entry.target.dataset.moonwalkId) {
-              console.debug('-- intersecting', entry.target.dataset.moonwalkId)
-            }
-
             const walkName = entry.target.getAttribute('data-moonwalk')
+            const targetId =
+              entry.target.getAttribute('data-testid') ||
+              walkName ||
+              entry.target.className
+
+            logMoonwalk('Observer', 'Element entered viewport', {
+              target: targetId,
+              walkName,
+              isIntersecting: entry.isIntersecting,
+              intersectionRatio: entry.intersectionRatio,
+            })
             const cfg = !walkName.length
               ? opts.walks.default
               : opts.walks[walkName]
 
-            const { duration, transition, interval, startDelay } = cfg
+            const { duration, transition, startDelay } = cfg
+            // Default interval to 0.15 if not specified (same as default walk)
+            const interval = cfg.interval !== undefined ? cfg.interval : 0.15
 
             let { alphaTween } = cfg
             let overlap = (duration - interval) * -1 // flip it
@@ -729,27 +1024,36 @@ export default class Moonwalk {
             } else if (alphaTween === true) {
               alphaTween = {
                 duration,
-                ease: 'sine.in',
+                ease: 'easeIn',
               }
             }
 
-            const tween = transition ? this.tweenJS : this.tweenCSS
-
             const tweenFn = () => {
-              tween(
-                section,
-                entry.target,
-                duration,
-                interval,
-                transition,
-                overlap,
-                alphaTween
-              )
+              if (transition) {
+                this.tweenJS(
+                  section,
+                  entry.target,
+                  duration,
+                  interval,
+                  transition,
+                  overlap,
+                  alphaTween
+                )
+              } else {
+                this.tweenCSS(
+                  section,
+                  entry.target,
+                  duration,
+                  interval,
+                  transition,
+                  overlap
+                )
+              }
             }
 
             const wrappedTweenFn = () => {
               if (startDelay) {
-                gsap.delayedCall(startDelay, tweenFn)
+                delayedCall(startDelay, tweenFn)
               } else {
                 tweenFn()
               }
@@ -813,56 +1117,90 @@ export default class Moonwalk {
     tweenOverlap,
     alphaTween
   ) {
-    let tweenPosition
-    const startingPoint = tweenDuration - tweenOverlap
+    const targetId =
+      target.getAttribute('data-testid') ||
+      target.getAttribute('data-moonwalk') ||
+      target.className
+
+    logMoonwalk('TweenJS', 'Starting tweenJS', {
+      target: targetId,
+      duration: tweenDuration,
+      overlap: tweenOverlap,
+      hasAlphaTween: !!alphaTween,
+    })
 
     if (Dom.hasAttribute(target, 'data-moonwalked')) {
+      logMoonwalk('TweenJS', 'Already moonwalked, skipping', { target: targetId })
       return
     }
 
-    if (section.timeline.isActive() && section.timeline.recent()) {
-      const currentTime = section.timeline.time()
-      const lastTweenTime = section.timeline.recent().time()
-      const lastTweenEndTime = section.timeline.recent().endTime()
-      if (lastTweenTime > startingPoint) {
-        /* We're late for this tween if it was supposed to be sequential,
-        so insert at current time in timeline instead */
-        tweenPosition = () => section.timeline.time()
-      } else {
-        if (currentTime + tweenOverlap * -1 < lastTweenEndTime) {
-          /* Still time, add as normal overlap at the end */
-          tweenPosition = () => `>${tweenOverlap}`
-        } else {
-          /* Won't make it */
-          tweenPosition = () => section.timeline.time()
-        }
-      }
-    } else {
-      tweenPosition = () => '>'
-    }
+    // Calculate delay using our new helper method
+    const delay = this.calculateDelay(section, tweenDuration, tweenOverlap)
+
+    // Initial state should already be set during ready()
+    // Only log for debugging
+    logMoonwalk('TweenJS', 'Element should already have initial state', {
+      target: targetId,
+      expectedFrom: tweenTransition.from,
+    })
+    logComputedStyle(target, ['opacity', 'transform', 'x', 'y'])
 
-    gsap.set(target, tweenTransition.from)
+    // Extract ease from to values (GSAP format) and convert to Motion easing option
+    const { ease, ...toValues } = tweenTransition.to
+    const easingOption = convertEasing(ease || 'easeOut')
 
-    const toTransition = {
-      ...tweenTransition.to,
+    logMoonwalk('TweenJS', 'Starting animation', {
+      target: targetId,
+      toValues,
       duration: tweenDuration,
-      onComplete: () => target.setAttribute('data-moonwalked', ''),
-    }
+      delay: delay.toFixed(3),
+      ease: easingOption,
+    })
 
-    section.timeline.to(target, toTransition, tweenPosition())
+    // Animate to final state
+    const animation = animate(target, toValues, {
+      duration: tweenDuration,
+      delay,
+      ease: easingOption,
+    })
 
+    // Use .finished promise for completion callback
+    if (animation && animation.finished) {
+      animation.finished
+        .then(() => {
+          logMoonwalk('TweenJS', 'Animation completed', { target: targetId })
+          target.setAttribute('data-moonwalked', '')
+        })
+        .catch((err) => {
+          // Animation cancelled or failed, still mark as walked
+          logMoonwalk('TweenJS', 'Animation failed/cancelled', {
+            target: targetId,
+            error: err,
+          })
+          target.setAttribute('data-moonwalked', '')
+        })
+    } else {
+      // No animation object returned, mark immediately
+      logMoonwalk('TweenJS', 'No animation object returned', { target: targetId })
+      target.setAttribute('data-moonwalked', '')
+    }
+
+    // Optional separate alpha animation
     if (alphaTween) {
-      section.timeline.to(
-        target,
-        {
-          duration: alphaTween.duration,
-          opacity: 1,
-          ease: alphaTween.ease,
-          delay: alphaTween.delay ? alphaTween.delay : 0,
-        },
-        '<'
-      )
+      logMoonwalk('TweenJS', 'Adding alpha tween', {
+        target: targetId,
+        duration: alphaTween.duration,
+        delay: (delay + (alphaTween.delay || 0)).toFixed(3),
+      })
+      animate(target, { opacity: 1 }, {
+        duration: alphaTween.duration,
+        ease: convertEasing(alphaTween.ease || 'easeIn'),
+        delay: delay + (alphaTween.delay || 0),
+      })
     }
+
+    // Update animation state for next element
+    this.updateAnimationState(section, delay, tweenDuration)
   }
 
   /**
@@ -882,47 +1220,35 @@ export default class Moonwalk {
     tweenTransition,
     tweenOverlap
   ) {
-    let tweenPosition
-    const startingPoint = tweenDuration - tweenOverlap * -1
-
     if (Dom.hasAttribute(target, 'data-moonwalked')) {
       return
     }
 
-    if (section.timeline.isActive() && section.timeline.recent()) {
-      const currentTime = section.timeline.time()
-      const lastTweenTime = section.timeline.recent().time()
-      const lastTweenEndTime = section.timeline.recent().endTime()
-      if (lastTweenTime > startingPoint) {
-        /* We're late for this tween if it was supposed to be sequential,
-        so insert at current time in timeline instead */
-        tweenPosition = () => section.timeline.time()
-      } else {
-        if (currentTime + tweenOverlap * -1 < lastTweenEndTime) {
-          /* Still time, add as normal overlap at the end */
-          tweenPosition = () => `>${tweenOverlap}`
-        } else {
-          /* Won't make it */
-          tweenPosition = () => section.timeline.time()
-        }
-      }
-    } else {
-      tweenPosition = () => '>'
-    }
+    // Calculate delay using our helper method for stagger effect
+    const calculatedDelay = this.calculateDelay(
+      section,
+      tweenDuration,
+      tweenOverlap
+    )
 
-    section.timeline
-      .to(
-        target,
-        {
-          css: {
-            className: target.className
-              ? `${target.className} moonwalked`
-              : 'moonwalked',
-          },
-          duration: tweenDuration,
-        },
-        tweenPosition()
-      )
-      .call(() => target.setAttribute('data-moonwalked', ''), null, '>')
+    const targetId = target.getAttribute('data-testid') || target.className
+
+    logMoonwalk('TweenCSS', 'Scheduling CSS animation', {
+      target: targetId,
+      delay: calculatedDelay.toFixed(3),
+      duration: tweenDuration,
+    })
+
+    // Add class after delay to trigger CSS transition
+    delayedCall(calculatedDelay, () => {
+      logMoonwalk('TweenCSS', 'Adding moonwalked attribute', {
+        target: targetId,
+      })
+      target.classList.add('moonwalked')
+      target.setAttribute('data-moonwalked', '')
+    })
+
+    // Update animation state for next element in section
+    this.updateAnimationState(section, calculatedDelay, tweenDuration)
   }
 }