@brandocms/jupiter 3.55.0 → 4.0.0-beta.1

package/src/modules/Lightbox/index.js

@@ -1,9 +1,39 @@
 import { Manager, Swipe } from '@egjs/hammerjs'
-import { gsap } from 'gsap'
+import { gsap } from 'gsap/all'
 import _defaultsDeep from 'lodash.defaultsdeep'
 import imageIsLoaded from '../../utils/imageIsLoaded'
 import Dom from '../Dom'
 
+/**
+ * @typedef {Object} LightboxElements
+ * @property {Function} [arrowRight] - Function to create right arrow element
+ * @property {Function} [arrowLeft] - Function to create left arrow element
+ * @property {Function} [close] - Function to create close button element
+ * @property {Function} [dot] - Function to create dot/indicator element
+ */
+
+/**
+ * @typedef {Object} LightboxOptions
+ * @property {boolean} [captions=false] - Enable captions
+ * @property {boolean} [numbers=false] - Enable index numbers
+ * @property {boolean} [swipe=true] - Enable swipe - this breaks native zoom
+ * @property {string|boolean} [trigger=false] - Selector for trigger element to open the lightbox
+ * @property {LightboxElements} [elements] - Custom elements configuration
+ * @property {Function} [onClick] - Click handler for lightbox
+ * @property {Function} [onPointerLeft] - Called when pointer moves left
+ * @property {Function} [onPointerRight] - Called when pointer moves right
+ * @property {Function} [onCaptionOut] - Called when caption fades out
+ * @property {Function} [onCaptionIn] - Called when caption fades in
+ * @property {Function} [onImageOut] - Called when image fades out
+ * @property {Function} [onImageIn] - Called when image fades in
+ * @property {Function} [onNumbers] - Called when numbers display updates
+ * @property {Function} [onBeforeOpen] - Called before opening lightbox
+ * @property {Function} [onOpen] - Called when lightbox opens
+ * @property {Function} [onAfterClose] - Called after lightbox closes
+ * @property {Function} [onClose] - Called when lightbox closes
+ */
+
+/** @type {LightboxOptions} */
 const DEFAULT_OPTIONS = {
   /* enable captions */
   captions: false,
@@ -33,7 +63,7 @@ const DEFAULT_OPTIONS = {
     },
 
     close: () => document.createTextNode('×'),
-    dot: () => document.createTextNode('▪')
+    dot: () => document.createTextNode('▪'),
   },
 
   onClick: (lightbox, section, e) => {
@@ -56,7 +86,10 @@ const DEFAULT_OPTIONS = {
       return
     }
 
-    lightbox.timelines.caption.to(lightbox.elements.caption, { duration: 0.4, autoAlpha: 0 })
+    lightbox.timelines.caption.to(lightbox.elements.caption, {
+      duration: 0.4,
+      autoAlpha: 0,
+    })
   },
 
   onCaptionIn: (lightbox, captionHasChanged) => {
@@ -64,16 +97,26 @@ const DEFAULT_OPTIONS = {
       return
     }
 
-    lightbox.timelines.caption.to(lightbox.elements.caption, { duration: 0.4, autoAlpha: 1 })
+    lightbox.timelines.caption.to(lightbox.elements.caption, {
+      duration: 0.4,
+      autoAlpha: 1,
+    })
   },
 
-  onImageOut: lightbox => {
-    lightbox.timelines.image.to(lightbox.currentImage, { duration: 0.5, autoAlpha: 0 })
+  onImageOut: (lightbox) => {
+    lightbox.timelines.image.to(lightbox.currentImage, {
+      duration: 0.5,
+      autoAlpha: 0,
+    })
   },
 
-  onImageIn: lightbox => {
+  onImageIn: (lightbox) => {
     const delay = lightbox.firstTransition ? 0.6 : 0.4
-    lightbox.timelines.image.to(lightbox.nextImage, { duration: 0.5, autoAlpha: 1, delay })
+    lightbox.timelines.image.to(lightbox.nextImage, {
+      duration: 0.5,
+      autoAlpha: 1,
+      delay,
+    })
   },
 
   onNumbers: (lightbox, section) => {
@@ -82,22 +125,22 @@ const DEFAULT_OPTIONS = {
 
   onBeforeOpen: () => {},
 
-  onOpen: h => {
+  onOpen: (h) => {
     h.app.scrollLock()
 
     gsap.to(h.elements.wrapper, {
       duration: 0.5,
-      opacity: 1
+      opacity: 1,
     })
   },
 
   onAfterClose: () => {},
 
-  onClose: h => {
+  onClose: (h) => {
     if (h.opts.captions) {
       gsap.to(h.elements.caption, {
         duration: 0.45,
-        opacity: 0
+        opacity: 0,
       })
     }
 
@@ -107,7 +150,7 @@ const DEFAULT_OPTIONS = {
         h.elements.nextArrow,
         h.elements.prevArrow,
         h.elements.close,
-        h.elements.dots
+        h.elements.dots,
       ],
       {
         duration: 0.5,
@@ -119,15 +162,23 @@ const DEFAULT_OPTIONS = {
             onComplete: () => {
               h.app.scrollRelease()
               h.destroy()
-            }
+            },
           })
-        }
+        },
       }
     )
-  }
+  },
 }
 
+/**
+ * Lightbox component for displaying images in a fullscreen overlay
+ */
 export default class Lightbox {
+  /**
+   * Create a new Lightbox instance
+   * @param {Object} app - Application instance
+   * @param {LightboxOptions} [opts={}] - Lightbox options
+   */
   constructor(app, opts = {}) {
     this.app = app
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
@@ -141,15 +192,16 @@ export default class Lightbox {
     this.previousCaption = null
     this.timelines = {
       caption: gsap.timeline({ paused: true }),
-      image: gsap.timeline({ paused: true })
+      image: gsap.timeline({ paused: true }),
     }
 
-    this.lightboxes.forEach(lightbox => {
+    this.lightboxes.forEach((lightbox) => {
       const href = lightbox.getAttribute('data-lightbox')
       const srcset = lightbox.getAttribute('data-srcset')
       const originalImage = lightbox.querySelector('img')
       const alt = originalImage.getAttribute('alt')
-      const section = lightbox.getAttribute('data-lightbox-section') || 'general'
+      const section =
+        lightbox.getAttribute('data-lightbox-section') || 'general'
       let trigger = lightbox
       if (this.opts.trigger) {
         trigger = Dom.find(lightbox, this.opts.trigger) || lightbox
@@ -162,12 +214,12 @@ export default class Lightbox {
       const image = {
         href,
         alt,
-        srcset
+        srcset,
       }
 
       const index = this.sections[section].push(image) - 1
 
-      trigger.addEventListener('click', e => {
+      trigger.addEventListener('click', (e) => {
         e.preventDefault()
         this.showBox(section, index)
       })
@@ -207,30 +259,30 @@ export default class Lightbox {
     this.elements.nextArrow.appendChild(this.opts.elements.arrowRight())
     this.elements.nextArrow.href = '#'
 
-    this.elements.nextArrow.addEventListener('click', e => {
+    this.elements.nextArrow.addEventListener('click', (e) => {
       e.stopPropagation()
       e.preventDefault()
       this.setImg(section, this.getNextIdx(section))
     })
 
-    this.elements.prevArrow.addEventListener('click', e => {
+    this.elements.prevArrow.addEventListener('click', (e) => {
       e.stopPropagation()
       e.preventDefault()
       this.setImg(section, this.getPrevIdx(section))
     })
 
-    this.keyUpCallback = event => {
+    this.keyUpCallback = (event) => {
       this.onKeyup(event, section)
     }
 
     document.removeEventListener('keyup', this.keyUpCallback)
     document.addEventListener('keyup', this.keyUpCallback)
 
-    this.elements.wrapper.addEventListener('mousemove', event => {
+    this.elements.wrapper.addEventListener('mousemove', (event) => {
       this.onMouseMove(event)
     })
 
-    this.elements.wrapper.addEventListener('click', event => {
+    this.elements.wrapper.addEventListener('click', (event) => {
       this.onClick(event, section)
     })
 
@@ -257,7 +309,7 @@ export default class Lightbox {
         activeLink = a
       }
 
-      a.addEventListener('click', e => {
+      a.addEventListener('click', (e) => {
         a.classList.add('active')
         activeLink.classList.remove('active')
         activeLink = a
@@ -296,7 +348,7 @@ export default class Lightbox {
 
     this.opts.onOpen(this)
 
-    this.elements.close.addEventListener('click', e => {
+    this.elements.close.addEventListener('click', (e) => {
       e.preventDefault()
       e.stopPropagation()
 
@@ -334,7 +386,8 @@ export default class Lightbox {
     activeDot.classList.add('active')
 
     if (this.elements.caption) {
-      captionHasChanged = this.previousCaption !== this.sections[section][index].alt
+      captionHasChanged =
+        this.previousCaption !== this.sections[section][index].alt
       this.previousCaption = this.sections[section][index].alt
       this.opts.onCaptionOut(this, captionHasChanged)
       this.timelines.caption.call(() => {
@@ -357,7 +410,10 @@ export default class Lightbox {
       if (this.imgs[index + x]) {
         this.imgs[index + x].src = this.sections[section][index + x].href
         if (this.sections[section][index + x].srcset) {
-          this.imgs[index + x].setAttribute('srcset', this.sections[section][index + x].srcset)
+          this.imgs[index + x].setAttribute(
+            'srcset',
+            this.sections[section][index + x].srcset
+          )
         }
       } else {
         break
@@ -367,7 +423,10 @@ export default class Lightbox {
     this.nextImage = this.imgs[index]
     this.nextImage.src = this.sections[section][index].href
     if (this.sections[section][index].srcset) {
-      this.nextImage.setAttribute('srcset', this.sections[section][index].srcset)
+      this.nextImage.setAttribute(
+        'srcset',
+        this.sections[section][index].srcset
+      )
     }
 
     this.opts.onImageIn(this)

package/src/modules/Links/index.js

@@ -1,9 +1,22 @@
-import { gsap } from 'gsap'
-import { ScrollToPlugin } from 'gsap/ScrollToPlugin'
+import { gsap, ScrollToPlugin } from 'gsap/all'
 import _defaultsDeep from 'lodash.defaultsdeep'
 
 gsap.registerPlugin(ScrollToPlugin)
 
+/**
+ * @typedef {Object} LinksOptions
+ * @property {boolean} [triggerEvents=true] - Whether to trigger events when scrolling
+ * @property {number} [scrollDuration=0.8] - Duration of scroll animation
+ * @property {boolean} [scrollOffsetNav=false] - Whether to offset scroll for nav header
+ * @property {number} [mobileMenuDelay=800] - Delay for mobile menu before scrolling
+ * @property {boolean} [openExternalInWindow=true] - Whether to open external links in new window
+ * @property {string} [linkQuery] - Query selector for regular links
+ * @property {string} [anchorQuery] - Query selector for anchor links
+ * @property {Function} [onAnchor] - Called when an anchor link is clicked
+ * @property {Function} [onTransition] - Called when transitioning between pages
+ */
+
+/** @type {LinksOptions} */
 const DEFAULT_OPTIONS = {
   triggerEvents: true,
   scrollDuration: 0.8,
@@ -82,7 +95,15 @@ const DEFAULT_OPTIONS = {
   },
 }
 
+/**
+ * Links handler for navigation and transitions
+ */
 export default class Links {
+  /**
+   * Create a new Links instance
+   * @param {Object} app - Application instance
+   * @param {LinksOptions} [opts={}] - Links options
+   */
   constructor(app, opts = {}) {
     this.app = app
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)

package/src/modules/MobileMenu/index.js

@@ -1,7 +1,20 @@
-import { gsap } from 'gsap'
+import { gsap } from 'gsap/all'
 import _defaultsDeep from 'lodash.defaultsdeep'
 import * as Events from '../../events'
 
+/**
+ * @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,7 +23,7 @@ const DEFAULT_OPTIONS = {
   hamburgerColor: '#000',
 
   onResize: null,
-  openTween: m => {
+  openTween: (m) => {
     const timeline = gsap.timeline()
 
     m.hamburger.classList.toggle('is-active')
@@ -23,12 +36,12 @@ const DEFAULT_OPTIONS = {
           duration: 0.35,
           x: '0%',
           opacity: 0,
-          height: window.innerHeight
+          height: window.innerHeight,
         },
         {
           duration: 0.35,
           opacity: 1,
-          ease: 'sine.in'
+          ease: 'sine.in',
         }
       )
       .to(
@@ -36,7 +49,7 @@ const DEFAULT_OPTIONS = {
         {
           duration: 0.35,
           opacity: 0,
-          ease: 'power3.out'
+          ease: 'power3.out',
         },
         '-=0.35'
       )
@@ -45,7 +58,7 @@ const DEFAULT_OPTIONS = {
         {
           duration: 0.55,
           backgroundColor: 'transparent',
-          ease: 'power3.out'
+          ease: 'power3.out',
         },
         '-=0.35'
       )
@@ -61,13 +74,13 @@ const DEFAULT_OPTIONS = {
         {
           duration: 1,
           opacity: 0,
-          x: 20
+          x: 20,
         },
         {
           duration: 1,
           x: 0,
           opacity: 1,
-          ease: 'power3.out'
+          ease: 'power3.out',
         },
         0.05
       )
@@ -77,14 +90,14 @@ const DEFAULT_OPTIONS = {
           duration: 0.55,
           opacity: 1,
           xPercent: 0,
-          ease: 'power3.inOut'
+          ease: 'power3.inOut',
         },
         '-=1.2'
       )
       .call(m._emitMobileMenuOpenEvent)
   },
 
-  closeTween: m => {
+  closeTween: (m) => {
     document.body.classList.toggle('open-menu')
     const timeline = gsap.timeline()
 
@@ -97,13 +110,13 @@ const DEFAULT_OPTIONS = {
         {
           duration: 0.2,
           opacity: 1,
-          xPercent: 0
+          xPercent: 0,
         },
         {
           duration: 0.2,
           opacity: 0,
           xPercent: 5,
-          ease: 'power3.out'
+          ease: 'power3.out',
         }
       )
       .set(m.logoPath, { clearProps: 'fill' })
@@ -113,7 +126,7 @@ const DEFAULT_OPTIONS = {
           duration: 0.5,
           opacity: 0,
           x: 20,
-          ease: 'power3.out'
+          ease: 'power3.out',
         },
         0.04
       )
@@ -123,7 +136,7 @@ const DEFAULT_OPTIONS = {
         {
           duration: 0.25,
           x: '100%',
-          ease: 'sine.in'
+          ease: 'sine.in',
         },
         '-=0.3'
       )
@@ -138,12 +151,20 @@ const DEFAULT_OPTIONS = {
       .to(m.logo, {
         duration: 0.35,
         opacity: 1,
-        ease: 'power3.in'
+        ease: 'power3.in',
       })
-  }
+  },
 }
 
+/**
+ * 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 +173,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 +188,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 +223,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)
   }
 }

package/src/modules/Moonwalk/index.js

@@ -1,8 +1,7 @@
 /**
  * Vendor imports
  */
-import { gsap } from 'gsap'
-import { CSSPlugin } from 'gsap/CSSPlugin'
+import { gsap, CSSPlugin } from 'gsap/all'
 import _defaultsDeep from 'lodash.defaultsdeep'
 
 /**
@@ -16,6 +15,50 @@ import Dom from '../Dom'
 
 gsap.registerPlugin(CSSPlugin)
 
+/**
+ * @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
+ */
+
+/**
+ * @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 +145,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)
@@ -648,15 +699,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 +762,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)
               }