@hortonstudio/main 1.4.4 → 1.4.5

package/animations/text.js

@@ -106,28 +106,10 @@ async function waitForFonts() {
 }
 
 function findTextElement(container) {
-  // Safari-optimized: Use simple querySelector instead of TreeWalker
-  // TreeWalker is notoriously slow in Safari/WebKit
-  const directTextElement = container.querySelector(':scope > *:first-child');
-  if (directTextElement && directTextElement.textContent.trim()) {
-    return directTextElement;
-  }
-  
-  // Fallback: check if container itself has text
-  if (container.textContent.trim()) {
-    return container;
-  }
-  
-  // Last resort: find any element with text content
-  const textElements = container.querySelectorAll('*');
-  for (let i = 0; i < textElements.length; i++) {
-    const el = textElements[i];
-    if (el.textContent.trim() && !el.querySelector('*')) {
-      return el;
-    }
-  }
-  
-  return 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() {
@@ -163,56 +145,21 @@ const CharSplitAnimations = {
 
     const elements = document.querySelectorAll('[data-hs-anim="char"]');
 
-    // Safari optimization: Process elements in smaller batches to avoid blocking
-    const processInBatches = (elements, batchSize = 5) => {
-      return new Promise((resolve) => {
-        let index = 0;
-        
-        const processBatch = () => {
-          const endIndex = Math.min(index + batchSize, elements.length);
-          
-          for (let i = index; i < endIndex; i++) {
-            const container = elements[i];
-            
-            // Skip if already processed
-            if (container.hasAttribute('data-split-processed')) continue;
-            
-            const textElement = findTextElement(container);
-            if (!textElement) continue;
-            
-            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 });
-            }
-          }
-          
-          index = endIndex;
-          
-          if (index < elements.length) {
-            requestAnimationFrame(processBatch);
-          } else {
-            resolve();
-          }
-        };
-        
-        processBatch();
+    elements.forEach((container) => {
+      const textElement = findTextElement(container);
+      
+      const split = SplitText.create(textElement, {
+        type: "words,chars",
+        mask: "chars",
+        charsClass: "char",
       });
-    };
+      container.splitTextInstance = split;
 
-    await processInBatches(elements);
+      gsap.set(split.chars, {
+        yPercent: config.charSplit.yPercent,
+      });
+      gsap.set(textElement, { autoAlpha: 1 });
+    });
   },
 
   async animate() {
@@ -222,48 +169,35 @@ const CharSplitAnimations = {
       return;
     }
 
-    // Safari optimization: Cache elements and reduce DOM queries
     const elements = document.querySelectorAll('[data-hs-anim="char"]');
     
     elements.forEach((container) => {
-      const textElement = findTextElement(container);
-      if (!textElement) return;
+      const chars = container.querySelectorAll(".char");
       
-      try {
-        const chars = container.querySelectorAll(".char");
-        if (chars.length === 0) return;
-        
-        const tl = gsap.timeline({
-          scrollTrigger: {
-            trigger: container,
-            start: config.charSplit.start,
-            invalidateOnRefresh: true,
-            toggleActions: "play none none none",
-            once: true,
-          },
-          onComplete: () => {
-            // Use requestAnimationFrame for cleanup to avoid Safari blocking
-            requestAnimationFrame(() => {
-              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 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 });
     });
   },
 };
@@ -279,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 });
     });
   },
 
@@ -311,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 });
+    });
   },
 };
 
@@ -361,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 });
     });
   },
 
@@ -393,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 });
+    });
   },
 };
 
@@ -442,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,
+      });
     });
   },
 
@@ -460,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 });
     });
   },
 };
@@ -497,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,
+      });
     });
   },
 
@@ -515,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 });
     });
   },
 };
@@ -552,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,
+      });
     });
   },
 
@@ -571,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 });
     });
   },
 };

package/index.js

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

package/package.json

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