@hortonstudio/main 1.2.15 → 1.2.19

package/animations/text.js

@@ -0,0 +1,379 @@
+const API_NAME = 'hsmain';
+
+// Check for reduced motion preference
+const prefersReducedMotion = () => {
+    return window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+};
+
+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() {
+    if (prefersReducedMotion()) {
+        // For reduced motion, just show elements without animation
+        showElementsWithoutAnimation();
+        return;
+    }
+    
+    setInitialStates().then(() => {
+        initAnimations();
+    });
+}
+
+let activeAnimations = [];
+
+function waitForFonts() {
+    return document.fonts.ready;
+}
+
+function showElementsWithoutAnimation() {
+    // Simply show all text elements without any animation or split text
+    const allTextElements = [
+        ...document.querySelectorAll(".a-char-split > *:first-child"),
+        ...document.querySelectorAll(".a-word-split > *:first-child"),
+        ...document.querySelectorAll(".a-line-split > *:first-child"),
+        ...document.querySelectorAll('.a-appear')
+    ];
+    
+    allTextElements.forEach(element => {
+        gsap.set(element, { 
+            autoAlpha: 1, 
+            y: 0, 
+            yPercent: 0, 
+            opacity: 1 
+        });
+    });
+}
+
+const CharSplitAnimations = {
+    async initial() {
+        await waitForFonts();
+        
+        if (prefersReducedMotion()) {
+            return;
+        }
+        
+        const elements = document.querySelectorAll(".a-char-split > *:first-child");
+        
+        elements.forEach((textElement) => {
+            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();
+
+        if (prefersReducedMotion()) {
+            return;
+        }
+
+        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: () => {
+                    
+                }
+            });
+
+            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();
+        
+        if (prefersReducedMotion()) {
+            return;
+        }
+        
+        const elements = document.querySelectorAll(".a-word-split > *:first-child");
+        
+        elements.forEach((textElement) => {
+            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();
+
+        if (prefersReducedMotion()) {
+            return;
+        }
+
+        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: () => {
+                    
+                }
+            });
+
+            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();
+        
+        if (prefersReducedMotion()) {
+            return;
+        }
+        
+        const elements = document.querySelectorAll(".a-line-split > *:first-child");
+        
+        elements.forEach((textElement) => {
+            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();
+
+        if (prefersReducedMotion()) {
+            return;
+        }
+
+        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: () => {
+                    
+                }
+            });
+
+            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();
+
+        if (prefersReducedMotion()) {
+            return;
+        }
+
+        const elements = document.querySelectorAll('.a-appear');
+        elements.forEach(element => {
+            gsap.set(element, {
+                y: config.appear.y,
+                opacity: 0
+            });
+        });
+    },
+
+    async animate() {
+        await waitForFonts();
+
+        if (prefersReducedMotion()) {
+            return;
+        }
+
+        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() {
+    // Check if there's a persistent config stored globally
+    const api = window[API_NAME] || {};
+    if (api.textAnimations?.config && api.textAnimations.config !== config) {
+        // Merge persistent config into current config
+        updateConfig(api.textAnimations.config);
+    }
+    
+    if (prefersReducedMotion()) {
+        // For reduced motion, just show elements without animation
+        showElementsWithoutAnimation();
+    } else {
+        await setInitialStates();
+        initAnimations();
+    }
+    
+    window.addEventListener('resize', ScrollTrigger.refresh());
+
+    api.textAnimations = {
+        config: config,
+        updateConfig: (newConfig) => {
+            updateConfig(newConfig);
+            // Store config reference for persistence across restarts
+            api.textAnimations.config = config;
+        },
+        start: startTextAnimations,
+        kill: killTextAnimations,
+        restart: () => {
+            killTextAnimations();
+            startTextAnimations();
+        }
+    };
+
+    return { result: 'anim-text initialized' };
+}

package/animations/transition.js

@@ -0,0 +1,57 @@
+// Page Transition Module
+const API_NAME = 'hsmain';
+export async function init() {
+  
+  // Register the transition logic to run after library is ready
+  window[API_NAME].afterReady(() => {
+    // Only run if jQuery is available
+    if (typeof $ !== 'undefined') {
+      initTransitions();
+    }
+  });
+  
+  return { result: 'anim-transition initialized' };
+}
+
+function initTransitions() {
+  let transitionTrigger = $(".transition-trigger");
+  let introDurationMS = 800;
+  let exitDurationMS = 400;
+  let excludedClass = "no-transition";
+    
+  // On Page Load
+  if (transitionTrigger.length > 0) {
+    if (window.Webflow && window.Webflow.push) {
+      Webflow.push(function () {
+        transitionTrigger.click();
+      });
+    } else {
+      // Non-Webflow initialization
+      setTimeout(() => {
+        transitionTrigger.click();
+      }, 100);
+    }
+    $("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);
+}

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/debug-version.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CDN Version Debug Test</title>
+</head>
+<body>
+    <h1>CDN Version Debug Test</h1>
+    <div id="results"></div>
+
+    <!-- Test with major version @1 -->
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@hortonstudio/main@1/index.js" data-hs-main data-hs-anim-hero></script>
+
+    <script>
+        setTimeout(() => {
+            const results = document.getElementById('results');
+            
+            // Check what scripts are found
+            const scripts = [...document.querySelectorAll('script[type="module"]')];
+            results.innerHTML += `<h2>Found Scripts:</h2>`;
+            scripts.forEach((script, i) => {
+                results.innerHTML += `<p>Script ${i}: ${script.src}</p>`;
+            });
+
+            // Check if hsmain loaded and what scripts it found
+            if (window.hsmain) {
+                results.innerHTML += `<h2>HSMAIN Scripts Found:</h2>`;
+                results.innerHTML += `<p>Found ${window.hsmain.scripts.length} matching scripts</p>`;
+                window.hsmain.scripts.forEach((script, i) => {
+                    results.innerHTML += `<p>HSMAIN Script ${i}: ${script.src}</p>`;
+                });
+            } else {
+                results.innerHTML += `<p>HSMAIN not loaded</p>`;
+            }
+        }, 2000);
+    </script>
+</body>
+</html>