@hortonstudio/main 1.0.0

package/animations/modules/hero.js

@@ -0,0 +1,154 @@
+// Hero Animations Module
+let heroTimeline = null;
+let headingSplits = [];
+
+export async function init() {
+    
+    // Check for GSAP
+    if (typeof window.gsap === "undefined") {
+        console.error('GSAP not found - hero animations disabled');
+        return;
+    }
+    
+    // Register plugins
+    gsap.registerPlugin(ScrollTrigger, SplitText);
+    
+    // Variable to control when animation starts (in seconds)
+    const heroAnimationDelay = 0.2;
+    
+    // SET INITIAL STATES IMMEDIATELY
+    gsap.set('[hero-anim="announce"]', { opacity: 0, yPercent: -100 });
+    gsap.set('[hero-anim="nav-container"]', { opacity: 0, yPercent: -100 });
+    gsap.set('[hero-anim="subheading"]', { y: 50, opacity: 0 });
+    gsap.set('[hero-anim="button"]', { y: 50, opacity: 0 });
+    gsap.set('[hero-anim="image"]', { opacity: 0 });
+    gsap.set('[hero-anim="appear1"]', { y: 50, opacity: 0 });
+    gsap.set('[hero-anim="appear2"]', { y: 50, opacity: 0 });
+    gsap.set('[hero-anim="appear3"]', { y: 50, opacity: 0 });
+    gsap.set('[hero-anim="appear4"]', { y: 50, opacity: 0 });
+    
+    // SET UP SPLIT TEXT WITH MASKS
+    const headingElements = document.querySelectorAll('[hero-anim="heading"]');
+    headingSplits = []; // Reset array
+    
+    headingElements.forEach(heading => {
+        const split = new SplitText(heading, {
+            type: "words",
+            mask: "words", 
+            wordsClass: "word"
+        });
+        headingSplits.push(split);
+        
+        // Set initial state for split text
+        gsap.set(split.words, { yPercent: 110 });
+        gsap.set(heading, { autoAlpha: 1 });
+    });
+    
+    // Wait for fonts to load, then start animation
+    document.fonts.ready.then(() => {
+        
+        setTimeout(() => {
+            // Create main timeline
+            heroTimeline = gsap.timeline();
+            
+            // 0s - Announce
+            heroTimeline.to('[hero-anim="announce"]', 
+                { opacity: 1, yPercent: 0, duration: 1, ease: 'power3.out' }, 
+                0
+            );
+            
+            // 0.05s - Nav Container  
+            heroTimeline.to('[hero-anim="nav-container"]', 
+                { opacity: 1, yPercent: 0, duration: 1, ease: 'power3.out' }, 
+                0.05
+            );
+            
+            // 0.15s - Heading (Split Text with masks)
+            headingSplits.forEach(split => {
+                heroTimeline.to(split.words, 
+                    { yPercent: 0, duration: 1.25, stagger: 0.1, ease: 'power4.out' }, 
+                    0.15
+                );
+            });
+            
+            // 0.25s - Subheading
+            heroTimeline.to('[hero-anim="subheading"]', 
+                { y: 0, opacity: 1, duration: 1.5, ease: 'power3.out' }, 
+                0.25
+            );
+            
+            // 0.35s - Button
+            heroTimeline.to('[hero-anim="button"]', 
+                { y: 0, opacity: 1, duration: 1.5, ease: 'power3.out' }, 
+                0.35
+            );
+            
+            // 0.35s - Image
+            heroTimeline.to('[hero-anim="image"]', 
+                { opacity: 1, duration: 1.25, ease: 'power3.out' }, 
+                0.35
+            );
+            
+            // 0.45s - Appear1
+            heroTimeline.to('[hero-anim="appear1"]', 
+                { y: 0, opacity: 1, duration: 1.5, ease: 'power3.out' }, 
+                0.45
+            );
+            
+            // 0.5s - Appear2  
+            heroTimeline.to('[hero-anim="appear2"]', 
+                { y: 0, opacity: 1, duration: 1.5, ease: 'power3.out' }, 
+                0.5
+            );
+            
+            // 0.55s - Appear3
+            heroTimeline.to('[hero-anim="appear3"]', 
+                { y: 0, opacity: 1, duration: 1.5, ease: 'power3.out' }, 
+                0.55
+            );
+            
+            // 0.55s - Appear4
+            heroTimeline.to('[hero-anim="appear4"]', 
+                { y: 0, opacity: 1, duration: 1.5, ease: 'power3.out' }, 
+                0.55
+            );
+            
+        }, heroAnimationDelay * 1000);
+        
+    });
+    
+    return { result: 'hero-main initialized' };
+}
+
+export function destroy() {
+    console.log('🧹 Hero animations destroyed');
+    
+    // Kill the main timeline
+    if (heroTimeline) {
+        heroTimeline.kill();
+        heroTimeline = null;
+    }
+    
+    // Revert all SplitText instances
+    headingSplits.forEach(split => {
+        if (split && split.revert) {
+            split.revert();
+        }
+    });
+    headingSplits = [];
+    
+    // Kill any ScrollTriggers (in case there are any)
+    ScrollTrigger.getAll().forEach(trigger => trigger.kill());
+    
+    // Reset elements to normal state
+    gsap.set('[hero-anim="announce"]', { clearProps: "all" });
+    gsap.set('[hero-anim="nav-container"]', { clearProps: "all" });
+    gsap.set('[hero-anim="subheading"]', { clearProps: "all" });
+    gsap.set('[hero-anim="button"]', { clearProps: "all" });
+    gsap.set('[hero-anim="image"]', { clearProps: "all" });
+    gsap.set('[hero-anim="appear1"]', { clearProps: "all" });
+    gsap.set('[hero-anim="appear2"]', { clearProps: "all" });
+    gsap.set('[hero-anim="appear3"]', { clearProps: "all" });
+    gsap.set('[hero-anim="appear4"]', { clearProps: "all" });
+    gsap.set('[hero-anim="heading"]', { clearProps: "all" });
+}

package/animations/modules/text.js

@@ -0,0 +1,165 @@
+let activeAnimations = [];
+let resizeTimeout;
+let lastWidth = window.innerWidth;
+
+function waitForFonts() {
+    return document.fonts.ready;
+}
+
+function checkGSAP() {
+    if (typeof window.gsap === "undefined") {
+        document.documentElement.classList.add("gsap-not-found");
+        return false;
+    }
+    gsap.registerPlugin(ScrollTrigger, SplitText);
+    return true;
+}
+
+const WordSplitAnimations = {
+    async initial() {
+        await waitForFonts();
+        
+        document.querySelectorAll(".a-word-split").forEach((text) => {
+            if (text.splitTextInstance) {
+                text.splitTextInstance.revert();
+            }
+        });
+
+        document.querySelectorAll(".a-word-split").forEach((text) => {
+            const split = SplitText.create(text, {
+                type: "words",
+                mask: "words",
+                wordsClass: "word",
+            });
+            text.splitTextInstance = split;
+            gsap.set(split.words, {
+                yPercent: 110
+            });
+            gsap.set(text, { autoAlpha: 1 });
+        });
+    },
+
+    async animate() {
+        await waitForFonts();
+        
+        document.querySelectorAll(".a-word-split").forEach((text) => {
+            const words = text.querySelectorAll('.word');
+            const tl = gsap.timeline({
+                scrollTrigger: {
+                    trigger: text,
+                    start: "top 95%",
+                    invalidateOnRefresh: true,
+                },
+            });
+            
+            tl.to(words, {
+                yPercent: 0,
+                duration: 1.25,
+                stagger: .1,
+                ease: "power4.out",
+            });
+            
+            activeAnimations.push({ timeline: tl, element: text });
+        });
+        
+        ScrollTrigger.refresh();
+    }
+};
+
+const AppearAnimations = {
+    async initial() {
+        await waitForFonts();
+        
+        const elements = document.querySelectorAll('.a-appear');
+        elements.forEach(element => {
+            gsap.set(element, {
+                y: 50,
+                opacity: 0
+            });
+        });
+    },
+
+    async animate() {
+        await waitForFonts();
+        
+        document.querySelectorAll('.a-appear').forEach(element => {
+            const tl = gsap.timeline({
+                scrollTrigger: {
+                    trigger: element,
+                    start: 'top 95%',
+                    invalidateOnRefresh: true,
+                }
+            });
+            
+            tl.to(element, {
+                y: 0,
+                opacity: 1,
+                duration: 1.5,
+                ease: 'power3.out'
+            });
+            
+            activeAnimations.push({ timeline: tl, element: element });
+        });
+        
+        ScrollTrigger.refresh();
+    }
+};
+
+async function setInitialStates() {
+    if (!checkGSAP()) return;
+    
+    await Promise.all([
+        WordSplitAnimations.initial(),
+        AppearAnimations.initial()
+    ]);
+}
+
+async function initAnimations() {
+    if (!checkGSAP()) return;
+    
+    await Promise.all([
+        WordSplitAnimations.animate(),
+        AppearAnimations.animate()
+    ]);
+}
+
+function handleResize() {
+    clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(() => {
+        const currentWidth = window.innerWidth;
+
+        if (Math.abs(currentWidth - lastWidth) > 10) {
+            lastWidth = currentWidth;
+            
+            setTimeout(() => {
+                setInitialStates();
+                setTimeout(() => {
+                    initAnimations();
+                }, 100);
+            }, 50);
+        }
+    }, 150);
+}
+
+export async function init() {
+    if (!checkGSAP()) return;
+    
+    await setInitialStates();
+    
+    setTimeout(() => {
+        initAnimations();
+    }, 750);
+    
+    window.addEventListener('resize', handleResize);
+    window.hsMain.textResizeHandler = handleResize;
+    
+    return {
+        result: 'text-main initialized',
+        reinit: () => {
+            setInitialStates();
+            setTimeout(() => {
+                initAnimations();
+            }, 100);
+        }
+    };
+}

package/animations/modules/transition.js

@@ -0,0 +1,40 @@
+// Page Transition Module
+export async function init() {
+  
+  // Your original code with minimal changes
+  let transitionTrigger = $(".transition-trigger");
+  let introDurationMS = 800;
+  let exitDurationMS = 400;
+  let excludedClass = "no-transition";
+    
+  // On Page Load
+  if (transitionTrigger.length > 0) {
+    Webflow.push(function () {
+      transitionTrigger.click();
+    });
+    $("body").addClass("no-scroll-transition");
+    setTimeout(() => {$("body").removeClass("no-scroll-transition");}, introDurationMS);
+  }
+  
+  // On Link Click
+  $("a").on("click", function (e) {
+    if ($(this).prop("hostname") == window.location.host && $(this).attr("href").indexOf("#") === -1 &&
+        !$(this).hasClass(excludedClass) && $(this).attr("target") !== "_blank" && transitionTrigger.length > 0) {
+      e.preventDefault();
+      $("body").addClass("no-scroll-transition");
+      let transitionURL = $(this).attr("href");
+      transitionTrigger.click();
+      setTimeout(function () {window.location = transitionURL;}, exitDurationMS);
+    }
+  });
+  
+  // On Back Button Tap
+  window.onpageshow = function(event) {if (event.persisted) {window.location.reload()}};
+  
+  // Hide Transition on Window Width Resize
+  setTimeout(() => {$(window).on("resize", function () {
+  setTimeout(() => {$(".transition").css("display", "none");}, 50);});
+  }, introDurationMS);
+  
+  return { result: 'transition-main initialized' };
+}

package/index.js

@@ -0,0 +1,122 @@
+window.hsMain = window.hsMain || {};
+
+const supportedModules = new Set([
+    "hs-a-text", "hs-a-hero", "hs-u-toc", "hs-a-transition"
+]);
+
+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 loadModule = (moduleName) => {
+    const modulePath = moduleMap[moduleName];
+    if (!modulePath) {
+        throw new Error(`HortonStudio module "${moduleName}" is not supported.`);
+    }
+    return import(modulePath);
+};
+
+const findCurrentScriptTag = () => {
+    const scriptTag = document.querySelector('script[hs-main]');
+    return scriptTag || null;
+};
+
+const processModules = (scriptTag) => {
+    if (!scriptTag) {
+        return;
+    }
+    
+    for (const moduleName of supportedModules) {
+        if (scriptTag.hasAttribute(moduleName)) {
+            loadHsModule(moduleName);
+        }
+    }
+};
+
+const loadHsModule = async (moduleName) => {
+    const { hsMain } = window;
+    
+    if (hsMain.process.has(moduleName)) {
+        return hsMain.modules[moduleName]?.loading;
+    }
+    
+    hsMain.process.add(moduleName);
+    
+    const moduleObj = hsMain.modules[moduleName] || {};
+    hsMain.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);
+            return loadHsModule(moduleName);
+        };
+        
+        moduleObj.resolve?.(result);
+        delete moduleObj.resolve;
+        delete moduleObj.reject;
+        
+        return result;
+        
+    } catch (error) {
+        moduleObj.reject?.(error);
+        hsMain.process.delete(moduleName);
+        throw error;
+    }
+};
+
+const initializeHsMain = () => {
+    const { hsMain } = window;
+    
+    const existingRequests = Array.isArray(hsMain) ? hsMain : [];
+    const scriptTag = findCurrentScriptTag();
+    
+    window.hsMain = {
+        scriptTag,
+        modules: {},
+        process: new Set(),
+        
+        load: loadHsModule,
+        
+        status(moduleName) {
+            if (!moduleName) {
+                return {
+                    loaded: Object.keys(this.modules),
+                    loading: [...this.process]
+                };
+            }
+            return {
+                loaded: !!this.modules[moduleName],
+                loading: this.process.has(moduleName)
+            };
+        }
+    };
+    
+    processModules(scriptTag);
+    
+    if (existingRequests.length > 0) {
+        existingRequests.forEach(request => {
+            if (typeof request === 'string') {
+                window.hsMain.load(request);
+            }
+        });
+    }
+};
+
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeHsMain);
+} else {
+    initializeHsMain();
+}

package/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@hortonstudio/main",
+  "version": "1.0.0",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "Horton Studio",
+  "license": "ISC",
+  "description": "Animation and utility library for client websites"
+}