@hortonstudio/main 1.4.2 → 1.4.4

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,40 @@ 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;
-      }
+  // 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 walker.nextNode() || container;
+  return 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,
@@ -160,30 +163,56 @@ 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');
+    // 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();
+      });
+    };
 
-        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 });
-      }
-    });
+    await processInBatches(elements);
   },
 
   async animate() {
@@ -193,42 +222,49 @@ 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: () => {
+    // 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;
+      
+      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,
-          });
+        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);
-        }
-      });
+        activeAnimations.push({ timeline: tl, element: textElement });
+      } catch (error) {
+        console.warn("Error animating char split:", error);
+      }
+    });
   },
 };
 
@@ -624,39 +660,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 +714,6 @@ export async function init() {
     cleanup: () => {
       killTextAnimations();
       window.removeEventListener("resize", resizeHandler);
-      clearTimeout(resizeTimeout);
     },
   };
 
@@ -691,11 +727,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.2
+// Version:1.4.4
 
 const API_NAME = "hsmain";
 

package/package.json

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

package/styles.css

@@ -9,6 +9,7 @@ body .transition {display: block}
     margin-bottom: -.1em;
     padding-inline: .1em;
     margin-inline: -.1em;
+    will-change: transform, opacity;
 }