@hortonstudio/main 1.0.0 → 1.1.0

package/animations/text.js

@@ -0,0 +1,305 @@
+const API_NAME = 'hsmain';
+
+const config = {
+    global: {
+        animationDelay: 0
+    },
+    wordSplit: {
+        duration: 1.5,
+        stagger: 0.075,
+        yPercent: 110,
+        ease: "power4.out",
+        start: "top 97%"
+    },
+    lineSplit: {
+        duration: 1.5,
+        stagger: 0.1,
+        yPercent: 110,
+        ease: "power4.out",
+        start: "top 97%"
+    },
+    charSplit: {
+        duration: 1.2,
+        stagger: 0.03,
+        yPercent: 110,
+        ease: "power4.out",
+        start: "top 97%"
+    },
+    appear: {
+        y: 50,
+        duration: 1.5,
+        ease: "power3.out",
+        start: "top 97%"
+    }
+};
+
+function updateConfig(newConfig) {
+    function deepMerge(target, source) {
+        for (const key in source) {
+            if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
+                target[key] = target[key] || {};
+                deepMerge(target[key], source[key]);
+            } else {
+                target[key] = source[key];
+            }
+        }
+        return target;
+    }
+    
+    deepMerge(config, newConfig);
+}
+
+function killTextAnimations() {
+    activeAnimations.forEach(({ timeline, element }) => {
+        if (timeline) {
+            timeline.kill();
+        }
+        if (element?.splitTextInstance) {
+            element.splitTextInstance.revert();
+        }
+    });
+    activeAnimations.length = 0;
+}
+
+function startTextAnimations() {
+    setInitialStates().then(() => {
+        initAnimations();
+    });
+}
+
+let activeAnimations = [];
+
+function waitForFonts() {
+    return document.fonts.ready;
+}
+
+const CharSplitAnimations = {
+    async initial() {
+        await waitForFonts();
+        
+        const elements = document.querySelectorAll(".a-char-split > *:first-child");
+        
+        elements.forEach((textElement, index) => {
+            
+            const split = SplitText.create(textElement, {
+                type: "chars",
+                mask: "chars",
+                charsClass: "char",
+            });
+            textElement.splitTextInstance = split;
+            
+            gsap.set(split.chars, {
+                yPercent: config.charSplit.yPercent
+            });
+            gsap.set(textElement, { autoAlpha: 1 });
+        });
+    },
+
+    async animate() {
+        await waitForFonts();
+
+        document.querySelectorAll(".a-char-split > *:first-child").forEach((textElement) => {
+            const chars = textElement.querySelectorAll('.char');
+            const tl = gsap.timeline({
+                scrollTrigger: {
+                    trigger: textElement,
+                    start: config.charSplit.start,
+                    invalidateOnRefresh: true,
+                },
+                onComplete: () => {
+                    textElement.splitTextInstance.revert();
+                }
+            });
+
+            tl.to(chars, {
+                yPercent: 0,
+                duration: config.charSplit.duration,
+                stagger: config.charSplit.stagger,
+                ease: config.charSplit.ease,
+            });
+
+            activeAnimations.push({ timeline: tl, element: textElement });
+        });
+    }
+};
+
+const WordSplitAnimations = {
+    async initial() {
+        await waitForFonts();
+        
+        const elements = document.querySelectorAll(".a-word-split > *:first-child");
+        
+        elements.forEach((textElement, index) => {
+            
+            const split = SplitText.create(textElement, {
+                type: "words",
+                mask: "words",
+                wordsClass: "word",
+            });
+            textElement.splitTextInstance = split;
+            
+            gsap.set(split.words, {
+                yPercent: config.wordSplit.yPercent
+            });
+            gsap.set(textElement, { autoAlpha: 1 });
+        });
+    },
+
+    async animate() {
+        await waitForFonts();
+
+        document.querySelectorAll(".a-word-split > *:first-child").forEach((textElement) => {
+            const words = textElement.querySelectorAll('.word');
+            const tl = gsap.timeline({
+                scrollTrigger: {
+                    trigger: textElement,
+                    start: config.wordSplit.start,
+                    invalidateOnRefresh: true,
+                },
+                onComplete: () => {
+                    textElement.splitTextInstance.revert();
+                }
+            });
+
+            tl.to(words, {
+                yPercent: 0,
+                duration: config.wordSplit.duration,
+                stagger: config.wordSplit.stagger,
+                ease: config.wordSplit.ease,
+            });
+
+            activeAnimations.push({ timeline: tl, element: textElement });
+        });
+    }
+};
+
+const LineSplitAnimations = {
+    async initial() {
+        await waitForFonts();
+        
+        const elements = document.querySelectorAll(".a-line-split > *:first-child");
+        
+        elements.forEach((textElement, index) => {
+            
+            const split = SplitText.create(textElement, {
+                type: "lines",
+                mask: "lines",
+                linesClass: "line",
+            });
+            textElement.splitTextInstance = split;
+            
+            gsap.set(split.lines, {
+                yPercent: config.lineSplit.yPercent
+            });
+            gsap.set(textElement, { autoAlpha: 1 });
+        });
+    },
+
+    async animate() {
+        await waitForFonts();
+
+        document.querySelectorAll(".a-line-split > *:first-child").forEach((textElement) => {
+            const lines = textElement.querySelectorAll('.line');
+            const tl = gsap.timeline({
+                scrollTrigger: {
+                    trigger: textElement,
+                    start: config.lineSplit.start,
+                    invalidateOnRefresh: true,
+                },
+                onComplete: () => {
+                    textElement.splitTextInstance.revert();
+                }
+            });
+
+            tl.to(lines, {
+                yPercent: 0,
+                duration: config.lineSplit.duration,
+                stagger: config.lineSplit.stagger,
+                ease: config.lineSplit.ease,
+            });
+
+            activeAnimations.push({ timeline: tl, element: textElement });
+        });
+    }
+};
+
+const AppearAnimations = {
+    async initial() {
+        await waitForFonts();
+
+        const elements = document.querySelectorAll('.a-appear');
+        elements.forEach(element => {
+            gsap.set(element, {
+                y: config.appear.y,
+                opacity: 0
+            });
+        });
+    },
+
+    async animate() {
+        await waitForFonts();
+
+        document.querySelectorAll('.a-appear').forEach(element => {
+            const tl = gsap.timeline({
+                scrollTrigger: {
+                    trigger: element,
+                    start: config.appear.start,
+                    invalidateOnRefresh: true,
+                }
+            });
+
+            tl.to(element, {
+                y: 0,
+                opacity: 1,
+                duration: config.appear.duration,
+                ease: config.appear.ease
+            });
+
+            activeAnimations.push({ timeline: tl, element: element });
+        });
+
+    }
+};
+
+async function setInitialStates() {
+    await Promise.all([
+        CharSplitAnimations.initial(),
+        WordSplitAnimations.initial(),
+        LineSplitAnimations.initial(),
+        AppearAnimations.initial()
+    ]);
+}
+
+async function initAnimations() {
+    if (config.global.animationDelay > 0) {
+        await new Promise(resolve => setTimeout(resolve, config.global.animationDelay * 1000));
+    }
+    
+    await Promise.all([
+        CharSplitAnimations.animate(),
+        WordSplitAnimations.animate(),
+        LineSplitAnimations.animate(),
+        AppearAnimations.animate()
+    ]);
+}
+
+export async function init() {
+    await setInitialStates();
+    initAnimations();
+    
+    window.addEventListener('resize', ScrollTrigger.refresh());
+
+    const api = window[API_NAME] || {};
+    api.textAnimations = {
+        config: config,
+        updateConfig: updateConfig,
+        start: startTextAnimations,
+        kill: killTextAnimations,
+        restart: () => {
+            killTextAnimations();
+            startTextAnimations();
+        }
+    };
+
+    return { result: 'anim-text initialized' };
+}

package/animations/{modules/transition.js → transition.js}

@@ -1,4 +1,5 @@
 // Page Transition Module
+const API_NAME = 'hsmain';
 export async function init() {
   
   // Your original code with minimal changes
@@ -36,5 +37,5 @@ export async function init() {
   setTimeout(() => {$(".transition").css("display", "none");}, 50);});
   }, introDurationMS);
   
-  return { result: 'transition-main initialized' };
+  return { result: 'anim-transition initialized' };
 }

package/autoInit/smooth-scroll.js

@@ -0,0 +1,89 @@
+const API_NAME = 'hsmain';
+
+export async function init() {
+    const api = window[API_NAME];
+    api.afterWebflowReady(() => {
+        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;
+    }
+    
+    function getScrollOffset() {
+        const offsetValue = getComputedStyle(document.documentElement)
+            .getPropertyValue('--misc--scroll-offset').trim();
+        return parseInt(offsetValue) || 0;
+    }
+    
+    // Smooth scroll to element with offset
+    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;
+            window.scrollTo(0, targetPosition);
+            target.setAttribute('tabindex', '-1');
+            target.focus({ preventScroll: true });
+            return;
+        }
+        
+        gsap.to(window, {
+            duration: 1,
+            scrollTo: {
+                y: target,
+                offsetY: offset
+            },
+            ease: "power2.out",
+            onComplete: function() {
+                target.setAttribute('tabindex', '-1');
+                target.focus({ preventScroll: true });
+            }
+        });
+    }
+    
+    // Handle anchor link clicks and keyboard activation
+    function handleAnchorClicks() {
+        document.addEventListener('click', handleAnchorActivation);
+        document.addEventListener('keydown', function(e) {
+            if (e.key === 'Enter' || e.key === ' ') {
+                handleAnchorActivation(e);
+            }
+        });
+    }
+    
+    function handleAnchorActivation(e) {
+        const link = e.target.closest('a[href^="#"]');
+        if (!link) return;
+        
+        const href = link.getAttribute('href');
+        if (!href || href === '#') return;
+        
+        const targetId = href.substring(1);
+        const targetElement = document.getElementById(targetId);
+        
+        if (targetElement) {
+            e.preventDefault();
+            if (history.replaceState) {
+                history.replaceState(null, null, `#${targetElement.id}`);
+            }
+            const offset = getScrollOffset();
+            scrollToElement(targetElement, offset);
+        }
+    }
+    
+    // Initialize anchor link handling
+    handleAnchorClicks();
+    
+    return {
+        result: 'autoInit-smooth-scroll initialized'
+    };
+}

package/index.js

@@ -1,18 +1,38 @@
-window.hsMain = window.hsMain || {};
+// Configuration: Change this variable to rename the API
+const API_NAME = 'hsmain';
 
-const supportedModules = new Set([
-    "hs-a-text", "hs-a-hero", "hs-u-toc", "hs-a-transition"
-]);
+window[API_NAME] = window[API_NAME] || {};
+window[API_NAME].loaded = false
 
-const moduleMap = {
-    "hs-a-text": "./animations/modules/text.js",
-    "hs-a-hero": "./animations/modules/hero.js",
-    "hs-u-toc": "./utils/modules/toc.js",
-    "hs-a-transition": "./animations/modules/transition.js"
+const animationModules = {
+    "data-hs-anim-text": "./animations/text.js",
+    "data-hs-anim-hero": "./animations/hero.js",
+    "data-hs-anim-transition": "./animations/transition.js"
 };
 
+const utilityModules = {
+    "data-hs-util-toc": "./utils/toc.js",
+    "data-hs-util-progress": "./utils/scroll-progress.js",
+    "data-hs-util-navbar": "./utils/navbar.js"
+};
+
+// Modules that auto-initialize
+const autoInitModules = {
+    "smooth-scroll": "./autoInit/smooth-scroll.js"
+};
+
+// Store callbacks to run after Webflow.ready()
+const postWebflowCallbacks = [];
+
 const loadModule = (moduleName) => {
-    const modulePath = moduleMap[moduleName];
+    // Check manual modules first
+    let modulePath = animationModules[moduleName] || utilityModules[moduleName];
+    
+    // Then check auto-init modules
+    if (!modulePath) {
+        modulePath = autoInitModules[moduleName];
+    }
+    
     if (!modulePath) {
         throw new Error(`HortonStudio module "${moduleName}" is not supported.`);
     }
@@ -20,81 +40,129 @@ const loadModule = (moduleName) => {
 };
 
 const findCurrentScriptTag = () => {
-    const scriptTag = document.querySelector('script[hs-main]');
+    const scriptTag = document.querySelector('script[data-hs-main]');
     return scriptTag || null;
 };
 
-const processModules = (scriptTag) => {
-    if (!scriptTag) {
-        return;
-    }
+const processModules = async (scriptTag) => {
+    const modulePromises = [];
     
-    for (const moduleName of supportedModules) {
-        if (scriptTag.hasAttribute(moduleName)) {
-            loadHsModule(moduleName);
+    // Load manual modules based on attributes
+    for (const moduleName of Object.keys({ ...animationModules, ...utilityModules })) {
+        if (scriptTag && scriptTag.hasAttribute(moduleName)) {
+            modulePromises.push(loadHsModule(moduleName));
         }
     }
-};
-
-const loadHsModule = async (moduleName) => {
-    const { hsMain } = window;
     
-    if (hsMain.process.has(moduleName)) {
-        return hsMain.modules[moduleName]?.loading;
+    // Load auto-init modules
+    for (const moduleName of Object.keys(autoInitModules)) {
+        modulePromises.push(loadHsModule(moduleName));
     }
     
-    hsMain.process.add(moduleName);
+    // Wait for ALL modules to finish loading
+    await Promise.all(modulePromises);
     
-    const moduleObj = hsMain.modules[moduleName] || {};
-    hsMain.modules[moduleName] = moduleObj;
+    // Always refresh Webflow after all modules are loaded
+    refreshWebflow();
+};
+
+const refreshWebflow = () => {
     
+    setTimeout(() => {
+        if (window.Webflow && window.Webflow.ready) {
+            window.Webflow.ready();
+            
+            // Run all registered post-Webflow callbacks
+            setTimeout(() => {
+                postWebflowCallbacks.forEach(callback => {
+                    try {
+                        callback();
+                    } catch (error) {
+                    }
+                });
+                window[API_NAME].loaded = true;
+            },);
+        }
+    },);
+};
+
+const loadHsModule = async (moduleName) => {
+    const apiInstance = window[API_NAME];
+
+    if (apiInstance.process.has(moduleName)) {
+        return apiInstance.modules[moduleName]?.loading;
+    }
+
+    apiInstance.process.add(moduleName);
+
+    const moduleObj = apiInstance.modules[moduleName] || {};
+    apiInstance.modules[moduleName] = moduleObj;
+
     moduleObj.loading = new Promise((resolve, reject) => {
         moduleObj.resolve = resolve;
         moduleObj.reject = reject;
     });
-    
+
     try {
         const { init, version } = await loadModule(moduleName);
         const initResult = await init();
         const { result } = initResult || {};
-        
+
         moduleObj.version = version;
         moduleObj.restart = () => {
-            hsMain.process.delete(moduleName);
+            apiInstance.process.delete(moduleName);
             return loadHsModule(moduleName);
         };
-        
+
         moduleObj.resolve?.(result);
         delete moduleObj.resolve;
         delete moduleObj.reject;
-        
+
         return result;
-        
+
     } catch (error) {
         moduleObj.reject?.(error);
-        hsMain.process.delete(moduleName);
+        apiInstance.process.delete(moduleName);
         throw error;
     }
 };
 
-const initializeHsMain = () => {
-    const { hsMain } = window;
-    
-    const existingRequests = Array.isArray(hsMain) ? hsMain : [];
+const initializeAPI = () => {
+    const apiInstance = window[API_NAME];
+
+    const existingRequests = Array.isArray(apiInstance) ? apiInstance : [];
     const scriptTag = findCurrentScriptTag();
-    
-    window.hsMain = {
+    const richTextBlocks = document.querySelectorAll('.w-richtext');
+    richTextBlocks.forEach(block => {
+        const images = block.querySelectorAll('img');
+        images.forEach(img => {
+            img.loading = 'eager';
+        });
+    });
+
+    window[API_NAME] = {
         scriptTag,
         modules: {},
         process: new Set(),
-        
+
         load: loadHsModule,
-        
+
+        // API function for scripts to register post-Webflow callbacks
+        afterWebflowReady: (callback) => {
+            if (typeof callback === 'function') {
+                postWebflowCallbacks.push(callback);
+            } else {
+            }
+        },
+
         status(moduleName) {
             if (!moduleName) {
                 return {
                     loaded: Object.keys(this.modules),
-                    loading: [...this.process]
+                    loading: [...this.process],
+                    animations: Object.keys(animationModules),
+                    utilities: Object.keys(utilityModules),
+                    autoInit: Object.keys(autoInitModules)
                 };
             }
             return {
@@ -103,20 +171,20 @@ const initializeHsMain = () => {
             };
         }
     };
-    
+
     processModules(scriptTag);
-    
+
     if (existingRequests.length > 0) {
         existingRequests.forEach(request => {
             if (typeof request === 'string') {
-                window.hsMain.load(request);
+                window[API_NAME].load(request);
             }
         });
     }
 };
 
 if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initializeHsMain);
+    document.addEventListener('DOMContentLoaded', initializeAPI);
 } else {
-    initializeHsMain();
+    initializeAPI();
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hortonstudio/main",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "main": "index.js",
   "type": "module",
   "scripts": {

package/styles.css

@@ -0,0 +1,17 @@
+/* transition */
+body .transition {display: block}
+.w-editor .transition {display: none;}
+.no-scroll-transition {overflow: hidden; position: relative;}
+
+/* splittext */
+.line-mask, .word-mask, .char-mask {
+    padding-bottom: .1em;
+    margin-bottom: -.1em;
+    padding-inline: .1em;
+    margin-inline: -.1em;
+}
+/* scroll cleanliness */
+html, body {
+    overscroll-behavior: none;
+    scrollbar-gutter: stable;
+  }