@hortonstudio/main 1.9.10 → 1.9.20

package/{autoInit → src/modules/default/functions}/smooth-scroll/README.md

@@ -13,12 +13,15 @@ The smooth scroll system provides GSAP-powered smooth scrolling for anchor links
 ### **Required Dependencies**
 
 **GSAP Core**
-* Must be loaded before this script
+
+- Must be loaded before this script
 
 **GSAP ScrollToPlugin**
-* Required for smooth scrolling functionality
+
+- Required for smooth scrolling functionality
 
 **Typical setup:**
+
 ```html
 <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollToPlugin.min.js"></script>
@@ -39,9 +42,9 @@ The smooth scroll system provides GSAP-powered smooth scrolling for anchor links
 
 ### **When It Runs**
 
-* Auto-initializes on page load
-* Runs on every page in a multi-page site
-* Listed in `autoInitModules` in index.js
+- Auto-initializes on page load
+- Runs on every page in a multi-page site
+- Listed in `autoInitModules` in index.js
 
 ---
 
@@ -88,6 +91,7 @@ Any link with `href` starting with `#`:
 ```
 
 **Requirements:**
+
 - Must have `href` attribute starting with `#`
 - Target element must have matching `id` attribute
 - Cannot be just `#` (empty hash)
@@ -105,6 +109,7 @@ Any link with `href` starting with `#`:
 ```
 
 **Requirements:**
+
 - Must have `id` attribute matching the anchor's `href` (without `#`)
 
 ---
@@ -128,7 +133,7 @@ gsap.to(window, {
     y: target,
     offsetY: offset,
   },
-  ease: "power2.out"
+  ease: 'power2.out',
 });
 ```
 
@@ -141,6 +146,7 @@ gsap.to(window, {
 ### **What It Does**
 
 If user has `prefers-reduced-motion: reduce` enabled:
+
 - Skips GSAP animation entirely
 - Uses instant scroll with `window.scrollTo()`
 - Still respects scroll offset
@@ -149,7 +155,7 @@ If user has `prefers-reduced-motion: reduce` enabled:
 ### **Detection**
 
 ```javascript
-window.matchMedia("(prefers-reduced-motion: reduce)").matches
+window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 ```
 
 **Result:** Users with motion sensitivity get instant, non-animated scrolling while maintaining all functionality.
@@ -161,6 +167,7 @@ window.matchMedia("(prefers-reduced-motion: reduce)").matches
 ### **Automatic Focus**
 
 After scrolling to target element:
+
 1. Sets `tabindex="-1"` on target (makes it focusable without adding to tab order)
 2. Calls `focus({ preventScroll: true })` on target
 3. Announces target to screen readers
@@ -174,6 +181,7 @@ After scrolling to target element:
 ### **What It Does**
 
 On page load, performs a quick scroll:
+
 1. Scrolls to `1px`
 2. Immediately scrolls back to `0px`
 
@@ -188,11 +196,13 @@ On page load, performs a quick scroll:
 ## **URL Hash Updates**
 
 When clicking an anchor link:
+
 1. Prevents default browser behavior
 2. Updates URL hash using `history.replaceState()`
 3. Scrolls to target
 
 **Example:**
+
 - Click `<a href="#about">`
 - URL changes from `example.com` to `example.com#about`
 - Page smoothly scrolls to `#about` element
@@ -206,8 +216,9 @@ When clicking an anchor link:
 ### **Supported Keys**
 
 When an anchor link is focused:
-- **Enter** � Triggers smooth scroll to target
-- **Space** � Triggers smooth scroll to target
+
+- **Enter** � Triggers smooth scroll to target
+- **Space** � Triggers smooth scroll to target
 
 **Implementation:** Keyboard events are handled the same as clicks, providing consistent behavior.
 
@@ -296,6 +307,7 @@ When an anchor link is focused:
 ### **Disables Webflow's Default Behavior**
 
 This script automatically disables:
+
 1. **jQuery scroll handler** - Removes `click.wf-scroll` event listener
 2. **CSS smooth scrolling** - Sets `scroll-behavior: auto`
 
@@ -309,10 +321,10 @@ This script automatically disables:
 
 This module doesn't require any data attributes - it works automatically with standard HTML anchor links.
 
-| Element | Requirement |
-| ----- | ----- |
-| Anchor link | `href="#target-id"` |
-| Target element | `id="target-id"` |
+| Element        | Requirement         |
+| -------------- | ------------------- |
+| Anchor link    | `href="#target-id"` |
+| Target element | `id="target-id"`    |
 
 ---
 
@@ -335,6 +347,25 @@ This module has no public API methods. It runs automatically and handles all anc
 
 ---
 
+## **v2.0.0 Improvements**
+
+### **JSON Config System**
+
+- Added config.js with module metadata
+- Future-proof: Ready for configuration options if needed
+- Note: This module auto-detects anchor links and requires no data attributes
+
+### **Barba.js / SPA Compatibility**
+
+The smooth-scroll system is fully compatible with Barba.js and other SPA frameworks:
+
+- Proper cleanup on destroy (removes event listeners, restores CSS scroll behavior)
+- Fresh initialization on reinitialize
+- Works on all anchor links on new pages
+- Works like fresh page load on new DOM
+
+---
+
 ## **Common Issues**
 
 **Smooth scroll not working:**
@@ -368,7 +399,7 @@ This module has no public API methods. It runs automatically and handles all anc
 **Reduced motion not instant:**
 
 1. Check browser/OS motion settings
-2. Test with DevTools: Rendering � Emulate CSS media `prefers-reduced-motion: reduce`
+2. Test with DevTools: Rendering � Emulate CSS media `prefers-reduced-motion: reduce`
 3. Verify scroll is instant (no animation)
 
 **URL hash not updating:**

package/{autoInit/smooth-scroll/smooth-scroll.js → src/modules/default/functions/smooth-scroll/smooth-scroll.ts}

@@ -1,30 +1,23 @@
-const API_NAME = "hsmain";
+import { getGsap, prefersReducedMotion } from '@utils';
 
 export async function init() {
-  const api = window[API_NAME];
-
   // Store event handlers for cleanup
   let clickHandler = null;
   let keydownHandler = null;
 
-  api.afterWebflowReady(() => {
-    if (typeof $ !== "undefined") {
-      $(document).off("click.wf-scroll");
-    }
-  });
+  // Disable Webflow's native scroll behavior (jQuery-based)
+  // This runs immediately since default module already waits for IX3
+  if (typeof $ !== 'undefined') {
+    $(document).off('click.wf-scroll');
+  }
 
   // Disable CSS smooth scrolling
-  document.documentElement.style.scrollBehavior = "auto";
-  document.body.style.scrollBehavior = "auto";
-
-  // Check if user prefers reduced motion
-  function prefersReducedMotion() {
-    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-  }
+  document.documentElement.style.scrollBehavior = 'auto';
+  document.body.style.scrollBehavior = 'auto';
 
   function getScrollOffset() {
     const offsetValue = getComputedStyle(document.documentElement)
-      .getPropertyValue("--misc--scroll-offset")
+      .getPropertyValue('--misc--scroll-offset')
       .trim();
     return parseInt(offsetValue) || 0;
   }
@@ -33,25 +26,26 @@ export async function init() {
   function scrollToElement(target, offset = 0) {
     if (!target) return;
 
-    // Skip animation if user prefers reduced motion
-    if (prefersReducedMotion()) {
-      const targetPosition =
-        target.getBoundingClientRect().top + window.scrollY - offset;
+    const gsapLib = getGsap('smooth-scroll', false);
+
+    // Skip animation if user prefers reduced motion or GSAP not available
+    if (prefersReducedMotion() || !gsapLib) {
+      const targetPosition = target.getBoundingClientRect().top + window.scrollY - offset;
       window.scrollTo(0, targetPosition);
-      target.setAttribute("tabindex", "-1");
+      target.setAttribute('tabindex', '-1');
       target.focus({ preventScroll: true });
       return;
     }
 
-    gsap.to(window, {
+    gsapLib.gsap.to(window, {
       duration: 1,
       scrollTo: {
         y: target,
         offsetY: offset,
       },
-      ease: "power2.out",
+      ease: 'power2.out',
       onComplete: function () {
-        target.setAttribute("tabindex", "-1");
+        target.setAttribute('tabindex', '-1');
         target.focus({ preventScroll: true });
       },
     });
@@ -61,8 +55,8 @@ export async function init() {
     const link = e.target.closest('a[href^="#"]');
     if (!link) return;
 
-    const href = link.getAttribute("href");
-    if (!href || href === "#") return;
+    const href = link.getAttribute('href');
+    if (!href || href === '#') return;
 
     const targetId = href.substring(1);
     const targetElement = document.getElementById(targetId);
@@ -81,40 +75,41 @@ export async function init() {
   function handleAnchorClicks() {
     clickHandler = handleAnchorActivation;
     keydownHandler = function (e) {
-      if (e.key === "Enter" || e.key === " ") {
+      if (e.key === 'Enter' || e.key === ' ') {
         handleAnchorActivation(e);
       }
     };
 
-    document.addEventListener("click", clickHandler);
-    document.addEventListener("keydown", keydownHandler);
+    document.addEventListener('click', clickHandler);
+    document.addEventListener('keydown', keydownHandler);
   }
 
   // Initialize anchor link handling
   handleAnchorClicks();
 
   // Mock scroll to trigger scroll-based animations
-  if (document.body.scrollHeight > window.innerHeight) {
-    gsap.set(window, { scrollTo: 1 });
-    gsap.set(window, { scrollTo: 0 });
+  const gsapLib = getGsap('smooth-scroll', false);
+  if (gsapLib && document.body.scrollHeight > window.innerHeight) {
+    gsapLib.gsap.set(window, { scrollTo: 1 });
+    gsapLib.gsap.set(window, { scrollTo: 0 });
   }
 
   return {
-    result: "autoInit-smooth-scroll initialized",
+    result: 'autoInit-smooth-scroll initialized',
     destroy: () => {
       // Remove event listeners
       if (clickHandler) {
-        document.removeEventListener("click", clickHandler);
+        document.removeEventListener('click', clickHandler);
         clickHandler = null;
       }
       if (keydownHandler) {
-        document.removeEventListener("keydown", keydownHandler);
+        document.removeEventListener('keydown', keydownHandler);
         keydownHandler = null;
       }
 
       // Re-enable CSS smooth scrolling
-      document.documentElement.style.scrollBehavior = "";
-      document.body.style.scrollBehavior = "";
-    }
+      document.documentElement.style.scrollBehavior = '';
+      document.body.style.scrollBehavior = '';
+    },
   };
 }

package/{autoInit → src/modules/default/functions}/transition/README.md

@@ -12,29 +12,29 @@ The page transition system provides smooth animated transitions between pages in
 
 ### **Required Elements**
 
-**Transition Trigger** *(invisible element that triggers Webflow IX animation)*
+**Transition Trigger** _(invisible element that triggers Webflow IX animation)_
 
-* data-hs-transition="trigger"
-* Webflow IX interaction attached (entrance and exit animations)
+- data-hs-transition="trigger"
+- Webflow IX interaction attached (entrance and exit animations)
 
-**Transition Element** *(visual overlay that covers the page during transition)*
+**Transition Element** _(visual overlay that covers the page during transition)_
 
-* data-hs-transition="element"
-* Should cover entire viewport
-* Contains visual transition effect (fade, slide, etc.)
+- data-hs-transition="element"
+- Should cover entire viewport
+- Contains visual transition effect (fade, slide, etc.)
 
-**Exit Time** *(optional attribute on transition element)*
+**Exit Time** _(optional attribute on transition element)_
 
-* data-hs-exit-time="0.5"
-* Time in seconds to wait before navigating to new page
-* Should match your Webflow exit animation duration
+- data-hs-exit-time="0.5"
+- Time in seconds to wait before navigating to new page
+- Should match your Webflow exit animation duration
 
-**Entrance Delay** *(optional attribute on transition element)*
+**Entrance Delay** _(optional attribute on transition element)_
 
-* data-hs-delay="0.3"
-* Delay in seconds before triggering entrance animation on FIRST page load only
-* Subsequent page loads trigger instantly (no delay)
-* Default: 0 (instant trigger)
+- data-hs-delay="0.3"
+- Delay in seconds before triggering entrance animation on FIRST page load only
+- Subsequent page loads trigger instantly (no delay)
+- Default: 0 (instant trigger)
 
 **Typical element layout:**
 
@@ -58,10 +58,10 @@ The page transition system provides smooth animated transitions between pages in
 
 ### **When It Runs**
 
-* Auto-initializes on page load (unless `no-transition` attribute is present)
-* Waits for Webflow to be ready (`afterWebflowReady()`)
-* Adds 50ms delay after Webflow ready to ensure IX is fully loaded
-* Runs on every page in a multi-page site
+- Auto-initializes on page load (unless `no-transition` attribute is present)
+- Waits for Webflow to be ready (`afterWebflowReady()`)
+- Adds 50ms delay after Webflow ready to ensure IX is fully loaded
+- Runs on every page in a multi-page site
 
 ---
 
@@ -72,10 +72,15 @@ The page transition system provides smooth animated transitions between pages in
 Add `no-transition` attribute to the script tag to disable page transitions:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@hortonstudio/main@latest" no-transition></script>
+<script
+  type="module"
+  src="https://cdn.jsdelivr.net/npm/@hortonstudio/main@latest"
+  no-transition
+></script>
 ```
 
 **When to use:**
+
 - During development/testing
 - On sites where transitions cause issues
 - For specific pages where you don't want transitions
@@ -135,12 +140,19 @@ Add this script to your site's `<head>` BEFORE the main script to prevent transi
 
 ```html
 <script>
-// Prevent transition if codebase hasn't loaded
-new MutationObserver((m,o)=>{if(document.documentElement.classList.contains('w-mod-ix3')){if(!document.documentElement.classList.contains('hs-main'))document.querySelectorAll('[data-hs-transition="element"]').forEach(el=>el.remove());o.disconnect()}}).observe(document.documentElement,{attributes:true,attributeFilter:['class']})
+  // Prevent transition if codebase hasn't loaded
+  new MutationObserver((m, o) => {
+    if (document.documentElement.classList.contains('w-mod-ix3')) {
+      if (!document.documentElement.classList.contains('hs-main'))
+        document.querySelectorAll('[data-hs-transition="element"]').forEach((el) => el.remove());
+      o.disconnect();
+    }
+  }).observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
 </script>
 ```
 
 **What it does:**
+
 1. Waits for Webflow IX to load (`w-mod-ix3` class)
 2. Checks if main codebase loaded (`hs-main` class)
 3. If main codebase didn't load, removes all transition elements
@@ -157,7 +169,13 @@ new MutationObserver((m,o)=>{if(document.documentElement.classList.contains('w-m
 ```html
 <!-- Fallback script in <head> -->
 <script>
-new MutationObserver((m,o)=>{if(document.documentElement.classList.contains('w-mod-ix3')){if(!document.documentElement.classList.contains('hs-main'))document.querySelectorAll('[data-hs-transition="element"]').forEach(el=>el.remove());o.disconnect()}}).observe(document.documentElement,{attributes:true,attributeFilter:['class']})
+  new MutationObserver((m, o) => {
+    if (document.documentElement.classList.contains('w-mod-ix3')) {
+      if (!document.documentElement.classList.contains('hs-main'))
+        document.querySelectorAll('[data-hs-transition="element"]').forEach((el) => el.remove());
+      o.disconnect();
+    }
+  }).observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
 </script>
 
 <!-- Main script -->
@@ -169,7 +187,11 @@ new MutationObserver((m,o)=>{if(document.documentElement.classList.contains('w-m
   <div data-hs-transition="trigger" style="width: 0; height: 0; opacity: 0;"></div>
 
   <!-- Visual overlay with 0.5s exit time -->
-  <div data-hs-transition="element" data-hs-exit-time="0.5" style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: black; z-index: 9999;">
+  <div
+    data-hs-transition="element"
+    data-hs-exit-time="0.5"
+    style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: black; z-index: 9999;"
+  >
     <!-- Optional loading animation or logo -->
   </div>
 </div>
@@ -195,6 +217,7 @@ new MutationObserver((m,o)=>{if(document.documentElement.classList.contains('w-m
 ```
 
 **Result:**
+
 - First visit to site: Waits 300ms, then triggers entrance animation
 - Navigating to other pages: Triggers entrance animation immediately
 
@@ -208,6 +231,7 @@ The system uses `sessionStorage` to track the first page load:
 **Value:** `'true'`
 
 **Purpose:** Differentiates between initial site visit and subsequent page navigations. Used to determine whether to apply the entrance delay (`data-hs-delay`):
+
 - **First load:** Delay is applied before entrance animation
 - **Subsequent loads:** No delay, entrance animation triggers immediately
 
@@ -216,6 +240,7 @@ The system uses `sessionStorage` to track the first page load:
 ## **Resize Handling**
 
 When the browser window is resized:
+
 - The transition element is hidden (`display: none`)
 - Prevents visual bugs with fixed positioning during resize
 - Transition will work again on next navigation
@@ -225,6 +250,7 @@ When the browser window is resized:
 ## **Back Button Behavior**
 
 When using the browser back button:
+
 - Page is fully reloaded (not cached)
 - Ensures transition animations play correctly
 - Uses `window.onpageshow` event with `persisted` check
@@ -233,13 +259,13 @@ When using the browser back button:
 
 ## **Key Attributes Summary**
 
-| Attribute | Purpose | Required On |
-| ----- | ----- | ----- |
-| `data-hs-transition="trigger"` | Animation trigger | Hidden trigger element |
-| `data-hs-transition="element"` | Visual transition overlay | Transition element |
-| `data-hs-exit-time="0.5"` | Exit duration in seconds | Transition element (optional) |
-| `data-hs-delay="0.3"` | First load entrance delay in seconds | Transition element (optional) |
-| `no-transition` | Disable transitions | Script tag (optional) |
+| Attribute                      | Purpose                              | Required On                   |
+| ------------------------------ | ------------------------------------ | ----------------------------- |
+| `data-hs-transition="trigger"` | Animation trigger                    | Hidden trigger element        |
+| `data-hs-transition="element"` | Visual transition overlay            | Transition element            |
+| `data-hs-exit-time="0.5"`      | Exit duration in seconds             | Transition element (optional) |
+| `data-hs-delay="0.3"`          | First load entrance delay in seconds | Transition element (optional) |
+| `no-transition`                | Disable transitions                  | Script tag (optional)         |
 
 ---
 
@@ -252,6 +278,7 @@ When using the browser back button:
 5. **Session tracking** - Uses sessionStorage to track first load
 6. **Back button reloads** - Forces full page reload on back navigation
 7. **Resize hides transition** - Prevents visual bugs during window resize
+8. **v2.0.0 improvements** - Enhanced Barba.js/SPA compatibility with proper timeout cleanup
 
 ---