@hortonstudio/main 1.4.3 → 1.4.5

package/animations/text.js

@@ -1,7 +1,6 @@
 const API_NAME = "hsmain";
 
 // Module-scoped variables for resize handling
-let resizeTimeout;
 let resizeHandler;
 
 // Check for reduced motion preference
@@ -107,36 +106,22 @@ async function waitForFonts() {
 }
 
 function findTextElement(container) {
-  // Find the deepest element that contains actual text
-  const walker = document.createTreeWalker(
-    container,
-    NodeFilter.SHOW_ELEMENT,
-    {
-      acceptNode: (node) => {
-        // Check if this element has direct text content (not just whitespace)
-        const hasDirectText = Array.from(node.childNodes).some(child => 
-          child.nodeType === Node.TEXT_NODE && child.textContent.trim()
-        );
-        return hasDirectText ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
-      }
-    }
-  );
-  
-  return walker.nextNode() || container;
+  // Simple direct approach: if container has direct text content, use it
+  // Otherwise use first child with text content
+  const firstChild = container.firstElementChild;
+  return firstChild && firstChild.textContent.trim() ? firstChild : container;
 }
 
 function showElementsWithoutAnimation() {
-  // Simply show all text elements without any animation or split text
-  const allTextElements = [
-    ...document.querySelectorAll('[data-hs-anim="char"]'),
-    ...document.querySelectorAll('[data-hs-anim="word"]'),
-    ...document.querySelectorAll('[data-hs-anim="line"]'),
-    ...document.querySelectorAll('[data-hs-anim="appear"]'),
-    ...document.querySelectorAll('[data-hs-anim="reveal"]'),
-    ...document.querySelectorAll('[data-hs-anim="group"]'),
-  ];
-
-  allTextElements.forEach((element) => {
+  // Safari-optimized: Use single query with comma-separated selectors
+  // This is significantly faster than multiple querySelectorAll calls
+  const allTextElements = document.querySelectorAll(
+    '[data-hs-anim="char"], [data-hs-anim="word"], [data-hs-anim="line"], [data-hs-anim="appear"], [data-hs-anim="reveal"], [data-hs-anim="group"]'
+  );
+
+  // Batch DOM operations for better Safari performance
+  const elementsArray = Array.from(allTextElements);
+  elementsArray.forEach((element) => {
     try {
       gsap.set(element, {
         autoAlpha: 1,
@@ -161,28 +146,19 @@ const CharSplitAnimations = {
     const elements = document.querySelectorAll('[data-hs-anim="char"]');
 
     elements.forEach((container) => {
-      // Skip if already processed
-      if (container.hasAttribute('data-split-processed')) return;
-      
       const textElement = findTextElement(container);
-      if (!textElement) return;
-      try {
-        const split = SplitText.create(textElement, {
-          type: "words,chars",
-          mask: "chars",
-          charsClass: "char",
-        });
-        container.splitTextInstance = split;
-        container.setAttribute('data-split-processed', 'true');
-
-        gsap.set(split.chars, {
-          yPercent: config.charSplit.yPercent,
-        });
-        gsap.set(textElement, { autoAlpha: 1 });
-      } catch (error) {
-        console.warn("Error creating char split:", error);
-        gsap.set(textElement, { autoAlpha: 1 });
-      }
+      
+      const split = SplitText.create(textElement, {
+        type: "words,chars",
+        mask: "chars",
+        charsClass: "char",
+      });
+      container.splitTextInstance = split;
+
+      gsap.set(split.chars, {
+        yPercent: config.charSplit.yPercent,
+      });
+      gsap.set(textElement, { autoAlpha: 1 });
     });
   },
 
@@ -193,42 +169,36 @@ const CharSplitAnimations = {
       return;
     }
 
-    document
-      .querySelectorAll('[data-hs-anim="char"]')
-      .forEach((container) => {
-        const textElement = findTextElement(container);
-        if (!textElement) return;
-        try {
-          const chars = container.querySelectorAll(".char");
-          const tl = gsap.timeline({
-            scrollTrigger: {
-              trigger: container,
-              start: config.charSplit.start,
-              invalidateOnRefresh: true,
-              toggleActions: "play none none none",
-              once: true,
-            },
-            onComplete: () => {
-              if (container.splitTextInstance) {
-                container.splitTextInstance.revert();
-                delete container.splitTextInstance;
-                container.removeAttribute('data-split-processed');
-              }
-            },
-          });
-
-          tl.to(chars, {
-            yPercent: 0,
-            duration: config.charSplit.duration,
-            stagger: config.charSplit.stagger,
-            ease: config.charSplit.ease,
-          });
-
-          activeAnimations.push({ timeline: tl, element: textElement });
-        } catch (error) {
-          console.warn("Error animating char split:", error);
-        }
+    const elements = document.querySelectorAll('[data-hs-anim="char"]');
+    
+    elements.forEach((container) => {
+      const chars = container.querySelectorAll(".char");
+      
+      const tl = gsap.timeline({
+        scrollTrigger: {
+          trigger: container,
+          start: config.charSplit.start,
+          invalidateOnRefresh: true,
+          toggleActions: "play none none none",
+          once: true,
+        },
+        onComplete: () => {
+          if (container.splitTextInstance) {
+            container.splitTextInstance.revert();
+            delete container.splitTextInstance;
+          }
+        },
       });
+
+      tl.to(chars, {
+        yPercent: 0,
+        duration: config.charSplit.duration,
+        stagger: config.charSplit.stagger,
+        ease: config.charSplit.ease,
+      });
+
+      activeAnimations.push({ timeline: tl, element: container });
+    });
   },
 };
 
@@ -243,28 +213,19 @@ const WordSplitAnimations = {
     const elements = document.querySelectorAll('[data-hs-anim="word"]');
 
     elements.forEach((container) => {
-      // Skip if already processed
-      if (container.hasAttribute('data-split-processed')) return;
-      
       const textElement = findTextElement(container);
-      if (!textElement) return;
-      try {
-        const split = SplitText.create(textElement, {
-          type: "words",
-          mask: "words",
-          wordsClass: "word",
-        });
-        container.splitTextInstance = split;
-        container.setAttribute('data-split-processed', 'true');
-
-        gsap.set(split.words, {
-          yPercent: config.wordSplit.yPercent,
-        });
-        gsap.set(textElement, { autoAlpha: 1 });
-      } catch (error) {
-        console.warn("Error creating word split:", error);
-        gsap.set(textElement, { autoAlpha: 1 });
-      }
+      
+      const split = SplitText.create(textElement, {
+        type: "words",
+        mask: "words",
+        wordsClass: "word",
+      });
+      container.splitTextInstance = split;
+
+      gsap.set(split.words, {
+        yPercent: config.wordSplit.yPercent,
+      });
+      gsap.set(textElement, { autoAlpha: 1 });
     });
   },
 
@@ -275,42 +236,36 @@ const WordSplitAnimations = {
       return;
     }
 
-    document
-      .querySelectorAll('[data-hs-anim="word"]')
-      .forEach((container) => {
-        const textElement = findTextElement(container);
-        if (!textElement) return;
-        try {
-          const words = container.querySelectorAll(".word");
-          const tl = gsap.timeline({
-            scrollTrigger: {
-              trigger: container,
-              start: config.wordSplit.start,
-              invalidateOnRefresh: true,
-              toggleActions: "play none none none",
-              once: true,
-            },
-            onComplete: () => {
-              if (container.splitTextInstance) {
-                container.splitTextInstance.revert();
-                delete container.splitTextInstance;
-                container.removeAttribute('data-split-processed');
-              }
-            },
-          });
-
-          tl.to(words, {
-            yPercent: 0,
-            duration: config.wordSplit.duration,
-            stagger: config.wordSplit.stagger,
-            ease: config.wordSplit.ease,
-          });
-
-          activeAnimations.push({ timeline: tl, element: textElement });
-        } catch (error) {
-          console.warn("Error animating word split:", error);
-        }
+    const elements = document.querySelectorAll('[data-hs-anim="word"]');
+    
+    elements.forEach((container) => {
+      const words = container.querySelectorAll(".word");
+      
+      const tl = gsap.timeline({
+        scrollTrigger: {
+          trigger: container,
+          start: config.wordSplit.start,
+          invalidateOnRefresh: true,
+          toggleActions: "play none none none",
+          once: true,
+        },
+        onComplete: () => {
+          if (container.splitTextInstance) {
+            container.splitTextInstance.revert();
+            delete container.splitTextInstance;
+          }
+        },
       });
+
+      tl.to(words, {
+        yPercent: 0,
+        duration: config.wordSplit.duration,
+        stagger: config.wordSplit.stagger,
+        ease: config.wordSplit.ease,
+      });
+
+      activeAnimations.push({ timeline: tl, element: container });
+    });
   },
 };
 
@@ -325,28 +280,19 @@ const LineSplitAnimations = {
     const elements = document.querySelectorAll('[data-hs-anim="line"]');
 
     elements.forEach((container) => {
-      // Skip if already processed
-      if (container.hasAttribute('data-split-processed')) return;
-      
       const textElement = findTextElement(container);
-      if (!textElement) return;
-      try {
-        const split = SplitText.create(textElement, {
-          type: "lines",
-          mask: "lines",
-          linesClass: "line",
-        });
-        container.splitTextInstance = split;
-        container.setAttribute('data-split-processed', 'true');
-
-        gsap.set(split.lines, {
-          yPercent: config.lineSplit.yPercent,
-        });
-        gsap.set(textElement, { autoAlpha: 1 });
-      } catch (error) {
-        console.warn("Error creating line split:", error);
-        gsap.set(textElement, { autoAlpha: 1 });
-      }
+      
+      const split = SplitText.create(textElement, {
+        type: "lines",
+        mask: "lines",
+        linesClass: "line",
+      });
+      container.splitTextInstance = split;
+
+      gsap.set(split.lines, {
+        yPercent: config.lineSplit.yPercent,
+      });
+      gsap.set(textElement, { autoAlpha: 1 });
     });
   },
 
@@ -357,42 +303,36 @@ const LineSplitAnimations = {
       return;
     }
 
-    document
-      .querySelectorAll('[data-hs-anim="line"]')
-      .forEach((container) => {
-        const textElement = findTextElement(container);
-        if (!textElement) return;
-        try {
-          const lines = container.querySelectorAll(".line");
-          const tl = gsap.timeline({
-            scrollTrigger: {
-              trigger: container,
-              start: config.lineSplit.start,
-              invalidateOnRefresh: true,
-              toggleActions: "play none none none",
-              once: true,
-            },
-            onComplete: () => {
-              if (container.splitTextInstance) {
-                container.splitTextInstance.revert();
-                delete container.splitTextInstance;
-                container.removeAttribute('data-split-processed');
-              }
-            },
-          });
-
-          tl.to(lines, {
-            yPercent: 0,
-            duration: config.lineSplit.duration,
-            stagger: config.lineSplit.stagger,
-            ease: config.lineSplit.ease,
-          });
-
-          activeAnimations.push({ timeline: tl, element: textElement });
-        } catch (error) {
-          console.warn("Error animating line split:", error);
-        }
+    const elements = document.querySelectorAll('[data-hs-anim="line"]');
+    
+    elements.forEach((container) => {
+      const lines = container.querySelectorAll(".line");
+      
+      const tl = gsap.timeline({
+        scrollTrigger: {
+          trigger: container,
+          start: config.lineSplit.start,
+          invalidateOnRefresh: true,
+          toggleActions: "play none none none",
+          once: true,
+        },
+        onComplete: () => {
+          if (container.splitTextInstance) {
+            container.splitTextInstance.revert();
+            delete container.splitTextInstance;
+          }
+        },
+      });
+
+      tl.to(lines, {
+        yPercent: 0,
+        duration: config.lineSplit.duration,
+        stagger: config.lineSplit.stagger,
+        ease: config.lineSplit.ease,
       });
+
+      activeAnimations.push({ timeline: tl, element: container });
+    });
   },
 };
 
@@ -406,14 +346,10 @@ const AppearAnimations = {
 
     const elements = document.querySelectorAll('[data-hs-anim="appear"]');
     elements.forEach((element) => {
-      try {
-        gsap.set(element, {
-          y: config.appear.y,
-          opacity: 0,
-        });
-      } catch (error) {
-        console.warn("Error setting appear initial state:", error);
-      }
+      gsap.set(element, {
+        y: config.appear.y,
+        opacity: 0,
+      });
     });
   },
 
@@ -424,29 +360,27 @@ const AppearAnimations = {
       return;
     }
 
-    document.querySelectorAll('[data-hs-anim="appear"]').forEach((element) => {
-      try {
-        const tl = gsap.timeline({
-          scrollTrigger: {
-            trigger: element,
-            start: config.appear.start,
-            invalidateOnRefresh: true,
-            toggleActions: "play none none none",
-            once: true,
-          },
-        });
-
-        tl.to(element, {
-          y: 0,
-          opacity: 1,
-          duration: config.appear.duration,
-          ease: config.appear.ease,
-        });
-
-        activeAnimations.push({ timeline: tl, element: element });
-      } catch (error) {
-        console.warn("Error animating appear:", error);
-      }
+    const elements = document.querySelectorAll('[data-hs-anim="appear"]');
+    
+    elements.forEach((element) => {
+      const tl = gsap.timeline({
+        scrollTrigger: {
+          trigger: element,
+          start: config.appear.start,
+          invalidateOnRefresh: true,
+          toggleActions: "play none none none",
+          once: true,
+        },
+      });
+
+      tl.to(element, {
+        y: 0,
+        opacity: 1,
+        duration: config.appear.duration,
+        ease: config.appear.ease,
+      });
+
+      activeAnimations.push({ timeline: tl, element: element });
     });
   },
 };
@@ -461,14 +395,10 @@ const RevealAnimations = {
 
     const elements = document.querySelectorAll('[data-hs-anim="reveal"]');
     elements.forEach((element) => {
-      try {
-        gsap.set(element, {
-          y: config.reveal.y,
-          opacity: 0,
-        });
-      } catch (error) {
-        console.warn("Error setting reveal initial state:", error);
-      }
+      gsap.set(element, {
+        y: config.reveal.y,
+        opacity: 0,
+      });
     });
   },
 
@@ -479,29 +409,27 @@ const RevealAnimations = {
       return;
     }
 
-    document.querySelectorAll('[data-hs-anim="reveal"]').forEach((element) => {
-      try {
-        const tl = gsap.timeline({
-          scrollTrigger: {
-            trigger: element,
-            start: config.reveal.start,
-            invalidateOnRefresh: true,
-            toggleActions: "play none none none",
-            once: true,
-          },
-        });
-
-        tl.to(element, {
-          y: 0,
-          opacity: 1,
-          duration: config.reveal.duration,
-          ease: config.reveal.ease,
-        });
-
-        activeAnimations.push({ timeline: tl, element: element });
-      } catch (error) {
-        console.warn("Error animating reveal:", error);
-      }
+    const elements = document.querySelectorAll('[data-hs-anim="reveal"]');
+    
+    elements.forEach((element) => {
+      const tl = gsap.timeline({
+        scrollTrigger: {
+          trigger: element,
+          start: config.reveal.start,
+          invalidateOnRefresh: true,
+          toggleActions: "play none none none",
+          once: true,
+        },
+      });
+
+      tl.to(element, {
+        y: 0,
+        opacity: 1,
+        duration: config.reveal.duration,
+        ease: config.reveal.ease,
+      });
+
+      activeAnimations.push({ timeline: tl, element: element });
     });
   },
 };
@@ -516,15 +444,11 @@ const GroupAnimations = {
 
     const elements = document.querySelectorAll('[data-hs-anim="group"]');
     elements.forEach((element) => {
-      try {
-        const children = Array.from(element.children);
-        gsap.set(children, {
-          y: config.appear.y,
-          opacity: 0,
-        });
-      } catch (error) {
-        console.warn("Error setting group initial state:", error);
-      }
+      const children = Array.from(element.children);
+      gsap.set(children, {
+        y: config.appear.y,
+        opacity: 0,
+      });
     });
   },
 
@@ -535,31 +459,29 @@ const GroupAnimations = {
       return;
     }
 
-    document.querySelectorAll('[data-hs-anim="group"]').forEach((element) => {
-      try {
-        const children = Array.from(element.children);
-        const tl = gsap.timeline({
-          scrollTrigger: {
-            trigger: element,
-            start: config.appear.start,
-            invalidateOnRefresh: true,
-            toggleActions: "play none none none",
-            once: true,
-          },
-        });
-
-        tl.to(children, {
-          y: 0,
-          opacity: 1,
-          duration: config.appear.duration,
-          ease: config.appear.ease,
-          stagger: 0.1,
-        });
-
-        activeAnimations.push({ timeline: tl, element: element });
-      } catch (error) {
-        console.warn("Error animating group:", error);
-      }
+    const elements = document.querySelectorAll('[data-hs-anim="group"]');
+    
+    elements.forEach((element) => {
+      const children = Array.from(element.children);
+      const tl = gsap.timeline({
+        scrollTrigger: {
+          trigger: element,
+          start: config.appear.start,
+          invalidateOnRefresh: true,
+          toggleActions: "play none none none",
+          once: true,
+        },
+      });
+
+      tl.to(children, {
+        y: 0,
+        opacity: 1,
+        duration: config.appear.duration,
+        ease: config.appear.ease,
+        stagger: 0.1,
+      });
+
+      activeAnimations.push({ timeline: tl, element: element });
     });
   },
 };
@@ -624,39 +546,40 @@ export async function init() {
     initAnimations();
   }
 
-  // Set up resize handler with cleanup
+  // Safari optimization: Throttled resize handler using requestAnimationFrame
+  let resizeScheduled = false;
   let lastWidth = window.innerWidth;
+  
   resizeHandler = () => {
     const currentWidth = window.innerWidth;
-    if (currentWidth !== lastWidth) {
+    if (currentWidth !== lastWidth && !resizeScheduled) {
       lastWidth = currentWidth;
-      clearTimeout(resizeTimeout);
-      resizeTimeout = setTimeout(() => {
+      resizeScheduled = true;
+      
+      // Use requestAnimationFrame instead of setTimeout for better Safari performance
+      requestAnimationFrame(() => {
         try {
           ScrollTrigger.refresh();
         } catch (error) {
           console.warn("Error refreshing ScrollTrigger:", error);
+        } finally {
+          resizeScheduled = false;
         }
-      }, 300);
+      });
     }
   };
-  window.addEventListener("resize", resizeHandler);
+  window.addEventListener("resize", resizeHandler, { passive: true });
 
-  // Add page load handler for proper ScrollTrigger refresh timing
-  const handlePageLoad = () => {
-    setTimeout(() => {
+  // Safari optimization: Simplified page load handling
+  // Complex event handlers and multiple timeouts cause Safari lag
+  if (document.readyState === 'complete') {
+    requestAnimationFrame(() => {
       try {
         ScrollTrigger.refresh();
       } catch (error) {
-        console.warn("Error refreshing ScrollTrigger on page load:", error);
+        console.warn("Error refreshing ScrollTrigger:", error);
       }
-    }, 100);
-  };
-
-  if (document.readyState === 'complete') {
-    handlePageLoad();
-  } else {
-    window.addEventListener('load', handlePageLoad);
+    });
   }
 
   // Initialize API with proper checks
@@ -677,7 +600,6 @@ export async function init() {
     cleanup: () => {
       killTextAnimations();
       window.removeEventListener("resize", resizeHandler);
-      clearTimeout(resizeTimeout);
     },
   };
 
@@ -691,11 +613,6 @@ export async function init() {
       window.removeEventListener("resize", resizeHandler);
     }
 
-    // Clear timeout
-    if (resizeTimeout) {
-      clearTimeout(resizeTimeout);
-    }
-
     // Remove initialized markers
     document.querySelectorAll("[data-initialized]").forEach((el) => {
       el.removeAttribute("data-initialized");

package/index.js

@@ -1,4 +1,4 @@
-// Version:1.4.3
+// Version:1.4.5
 
 const API_NAME = "hsmain";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hortonstudio/main",
-  "version": "1.4.3",
+  "version": "1.4.5",
   "description": "Animation and utility library for client websites",
   "main": "index.js",
   "type": "module",