@hortonstudio/main 1.2.9 → 1.2.11

package/animations/hero.js

@@ -1,5 +1,10 @@
 const API_NAME = 'hsmain';
 
+// Check for reduced motion preference
+const prefersReducedMotion = () => {
+    return window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+};
+
 // Animation timing (in seconds)
 const timing = {
     announce: 0,
@@ -119,12 +124,76 @@ function startHeroAnimations() {
     init();
 }
 
+function showHeroElementsWithoutAnimation() {
+    // Simply show all hero elements without any animation or split text
+    const allHeroElements = [
+        ...document.querySelectorAll('[data-hs-hero="announce"]'),
+        ...document.querySelectorAll('[data-hs-hero="nav"]'),
+        ...document.querySelectorAll('[data-hs-hero="nav-menu"]'),
+        ...document.querySelectorAll('[data-hs-hero="nav-logo"]'),
+        ...document.querySelectorAll('[data-hs-hero="nav-button"] > *:first-child'),
+        ...document.querySelectorAll('[data-hs-hero="nav-list"] > * > *:first-child'),
+        ...document.querySelectorAll('[data-hs-hero="heading"] > *:first-child'),
+        ...document.querySelectorAll('[data-hs-hero="subheading"] > *:first-child'),
+        ...document.querySelectorAll('[data-hs-hero="tag"] > *:first-child'),
+        ...document.querySelectorAll('[data-hs-hero="button"] > *'),
+        ...document.querySelectorAll('[data-hs-hero="image"]'),
+        ...document.querySelectorAll('[data-hs-hero="appear"]')
+    ];
+    
+    allHeroElements.forEach(element => {
+        if (element) {
+            gsap.set(element, { 
+                autoAlpha: 1, 
+                opacity: 1, 
+                y: 0, 
+                yPercent: 0 
+            });
+            // Remove any pointer-events restrictions
+            element.style.pointerEvents = '';
+        }
+    });
+
+    // Restore page-wide tabbing
+    const allFocusableElements = document.querySelectorAll('[data-original-tabindex]');
+    allFocusableElements.forEach(el => {
+        el.style.pointerEvents = '';
+        const originalTabindex = el.getAttribute('data-original-tabindex');
+        if (originalTabindex === '0') {
+            el.removeAttribute('tabindex');
+        } else {
+            el.setAttribute('tabindex', originalTabindex);
+        }
+        el.removeAttribute('data-original-tabindex');
+    });
+}
+
 export async function init() {
     if (typeof window.gsap === "undefined") {
         console.error('GSAP not found - hero animations disabled');
         return;
     }
     
+    if (prefersReducedMotion()) {
+        // For reduced motion, just show elements without animation
+        showHeroElementsWithoutAnimation();
+        
+        // Still expose the API for consistency
+        window[API_NAME] = window[API_NAME] || {};
+        window[API_NAME].heroAnimations = {
+            config: config,
+            updateConfig: updateConfig,
+            start: startHeroAnimations,
+            kill: killHeroAnimations,
+            restart: () => {
+                killHeroAnimations();
+                startHeroAnimations();
+            }
+        };
+        
+        return { result: 'anim-hero initialized (reduced motion)' };
+    }
+    
     gsap.registerPlugin(ScrollTrigger, SplitText);
     
     // Element selection

package/animations/text.js

@@ -1,5 +1,10 @@
 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
@@ -62,6 +67,12 @@ function killTextAnimations() {
 }
 
 function startTextAnimations() {
+    if (prefersReducedMotion()) {
+        // For reduced motion, just show elements without animation
+        showElementsWithoutAnimation();
+        return;
+    }
+    
     setInitialStates().then(() => {
         initAnimations();
     });
@@ -73,14 +84,36 @@ 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, index) => {
-            
+        elements.forEach((textElement) => {
             const split = SplitText.create(textElement, {
                 type: "chars",
                 mask: "chars",
@@ -98,6 +131,10 @@ const CharSplitAnimations = {
     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({
@@ -127,10 +164,13 @@ const WordSplitAnimations = {
     async initial() {
         await waitForFonts();
         
+        if (prefersReducedMotion()) {
+            return;
+        }
+        
         const elements = document.querySelectorAll(".a-word-split > *:first-child");
         
-        elements.forEach((textElement, index) => {
-            
+        elements.forEach((textElement) => {
             const split = SplitText.create(textElement, {
                 type: "words",
                 mask: "words",
@@ -148,6 +188,10 @@ const WordSplitAnimations = {
     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({
@@ -177,10 +221,13 @@ const LineSplitAnimations = {
     async initial() {
         await waitForFonts();
         
+        if (prefersReducedMotion()) {
+            return;
+        }
+        
         const elements = document.querySelectorAll(".a-line-split > *:first-child");
         
-        elements.forEach((textElement, index) => {
-            
+        elements.forEach((textElement) => {
             const split = SplitText.create(textElement, {
                 type: "lines",
                 mask: "lines",
@@ -198,6 +245,10 @@ const LineSplitAnimations = {
     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({
@@ -227,6 +278,10 @@ const AppearAnimations = {
     async initial() {
         await waitForFonts();
 
+        if (prefersReducedMotion()) {
+            return;
+        }
+
         const elements = document.querySelectorAll('.a-appear');
         elements.forEach(element => {
             gsap.set(element, {
@@ -239,6 +294,10 @@ const AppearAnimations = {
     async animate() {
         await waitForFonts();
 
+        if (prefersReducedMotion()) {
+            return;
+        }
+
         document.querySelectorAll('.a-appear').forEach(element => {
             const tl = gsap.timeline({
                 scrollTrigger: {
@@ -284,8 +343,13 @@ async function initAnimations() {
 }
 
 export async function init() {
-    await setInitialStates();
-    initAnimations();
+    if (prefersReducedMotion()) {
+        // For reduced motion, just show elements without animation
+        showElementsWithoutAnimation();
+    } else {
+        await setInitialStates();
+        initAnimations();
+    }
     
     window.addEventListener('resize', ScrollTrigger.refresh());
 

package/index.js

@@ -1,4 +1,4 @@
-// ver 1.2.9
+// ver 1.2.11
 
 const API_NAME = 'hsmain';
 

package/package.json

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