@hortonstudio/main 1.2.35 → 1.4.1

package/animations/text.js

@@ -1,389 +1,604 @@
-const API_NAME = 'hsmain';
+const API_NAME = "hsmain";
+
+// Module-scoped variables for resize handling
+let resizeTimeout;
+let resizeHandler;
 
 // Check for reduced motion preference
 const prefersReducedMotion = () => {
-    return window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  return (
+    window.matchMedia &&
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  );
 };
 
 const config = {
-    global: {
-        animationDelay: 0
-    },
-    wordSplit: {
-        duration: 1.5,
-        stagger: 0.05,
-        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.015,
-        yPercent: 110,
-        ease: "power4.out",
-        start: "top 97%"
-    },
-    appear: {
-        y: 50,
-        duration: 1.5,
-        ease: "power3.out",
-        start: "top 97%"
-    }
+  global: {
+    animationDelay: 0,
+  },
+  wordSplit: {
+    duration: 1.5,
+    stagger: 0.05,
+    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.015,
+    yPercent: 110,
+    ease: "power4.out",
+    start: "top 97%",
+  },
+  appear: {
+    y: 50,
+    duration: 1.5,
+    ease: "power3.out",
+    start: "top 97%",
+  },
+  reveal: {
+    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;
+  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];
+      }
     }
-    
-    deepMerge(config, newConfig);
+    return target;
+  }
+
+  deepMerge(config, newConfig);
 }
 
 function killTextAnimations() {
-    activeAnimations.forEach(({ timeline, element }) => {
-        if (timeline) {
-            timeline.kill();
-        }
-        if (element?.splitTextInstance) {
-            element.splitTextInstance.revert();
-        }
-    });
-    activeAnimations.length = 0;
+  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();
-    });
+  if (prefersReducedMotion()) {
+    // For reduced motion, just show elements without animation
+    showElementsWithoutAnimation();
+    return;
+  }
+
+  setInitialStates().then(() => {
+    initAnimations();
+  });
 }
 
 let activeAnimations = [];
 
-function waitForFonts() {
-    return document.fonts.ready;
+async function waitForFonts() {
+  try {
+    return await document.fonts.ready;
+  } catch (error) {
+    console.warn("Font loading error:", error);
+    return Promise.resolve();
+  }
 }
 
 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 
-        });
-    });
+  // 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"),
+    ...document.querySelectorAll(".a-reveal"),
+  ];
+
+  allTextElements.forEach((element) => {
+    try {
+      gsap.set(element, {
+        autoAlpha: 1,
+        y: 0,
+        yPercent: 0,
+        opacity: 1,
+      });
+    } catch (error) {
+      console.warn("Error setting element visibility:", error);
+    }
+  });
 }
 
 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: "words,chars",
-                mask: "chars",
-                charsClass: "char",
-            });
-            textElement.splitTextInstance = split;
-            
-            gsap.set(split.chars, {
-                yPercent: config.charSplit.yPercent
-            });
-            gsap.set(textElement, { autoAlpha: 1 });
-        });
-    },
+  async initial() {
+    await waitForFonts();
+
+    if (prefersReducedMotion()) {
+      return;
+    }
 
-    async animate() {
-        await waitForFonts();
+    const elements = document.querySelectorAll(".a-char-split > *:first-child");
 
-        if (prefersReducedMotion()) {
-            return;
-        }
+    elements.forEach((textElement) => {
+      try {
+        const split = SplitText.create(textElement, {
+          type: "words,chars",
+          mask: "chars",
+          charsClass: "char",
+        });
+        textElement.splitTextInstance = split;
 
-        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: false,
-                },
-                onComplete: () => {
-                    if (textElement.splitTextInstance) {
-                        textElement.splitTextInstance.revert();
-                        delete textElement.splitTextInstance;
-                    }
-                }
-            });
-
-            tl.to(chars, {
-                yPercent: 0,
-                duration: config.charSplit.duration,
-                stagger: config.charSplit.stagger,
-                ease: config.charSplit.ease,
-            });
-
-            activeAnimations.push({ timeline: tl, element: textElement });
+        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 });
+      }
+    });
+  },
+
+  async animate() {
+    await waitForFonts();
+
+    if (prefersReducedMotion()) {
+      return;
     }
+
+    document
+      .querySelectorAll(".a-char-split > *:first-child")
+      .forEach((textElement) => {
+        try {
+          const chars = textElement.querySelectorAll(".char");
+          const tl = gsap.timeline({
+            scrollTrigger: {
+              trigger: textElement,
+              start: config.charSplit.start,
+              invalidateOnRefresh: true,
+              toggleActions: "play none none none",
+              once: true,
+            },
+            onComplete: () => {
+              if (textElement.splitTextInstance) {
+                textElement.splitTextInstance.revert();
+                delete textElement.splitTextInstance;
+              }
+            },
+          });
+
+          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 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 initial() {
+    await waitForFonts();
+
+    if (prefersReducedMotion()) {
+      return;
+    }
 
-    async animate() {
-        await waitForFonts();
+    const elements = document.querySelectorAll(".a-word-split > *:first-child");
 
-        if (prefersReducedMotion()) {
-            return;
-        }
+    elements.forEach((textElement) => {
+      try {
+        const split = SplitText.create(textElement, {
+          type: "words",
+          mask: "words",
+          wordsClass: "word",
+        });
+        textElement.splitTextInstance = split;
 
-        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: false,
-                },
-                onComplete: () => {
-                    if (textElement.splitTextInstance) {
-                        textElement.splitTextInstance.revert();
-                        delete textElement.splitTextInstance;
-                    }
-                }
-            });
-
-            tl.to(words, {
-                yPercent: 0,
-                duration: config.wordSplit.duration,
-                stagger: config.wordSplit.stagger,
-                ease: config.wordSplit.ease,
-            });
-
-            activeAnimations.push({ timeline: tl, element: textElement });
+        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 });
+      }
+    });
+  },
+
+  async animate() {
+    await waitForFonts();
+
+    if (prefersReducedMotion()) {
+      return;
     }
+
+    document
+      .querySelectorAll(".a-word-split > *:first-child")
+      .forEach((textElement) => {
+        try {
+          const words = textElement.querySelectorAll(".word");
+          const tl = gsap.timeline({
+            scrollTrigger: {
+              trigger: textElement,
+              start: config.wordSplit.start,
+              invalidateOnRefresh: true,
+              toggleActions: "play none none none",
+              once: true,
+            },
+            onComplete: () => {
+              if (textElement.splitTextInstance) {
+                textElement.splitTextInstance.revert();
+                delete textElement.splitTextInstance;
+              }
+            },
+          });
+
+          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 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 initial() {
+    await waitForFonts();
 
-    async animate() {
-        await waitForFonts();
+    if (prefersReducedMotion()) {
+      return;
+    }
 
-        if (prefersReducedMotion()) {
-            return;
-        }
+    const elements = document.querySelectorAll(".a-line-split > *:first-child");
 
-        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: false,
-                },
-                onComplete: () => {
-                    if (textElement.splitTextInstance) {
-                        textElement.splitTextInstance.revert();
-                        delete textElement.splitTextInstance;
-                    }
-                }
-            });
-
-            tl.to(lines, {
-                yPercent: 0,
-                duration: config.lineSplit.duration,
-                stagger: config.lineSplit.stagger,
-                ease: config.lineSplit.ease,
-            });
-
-            activeAnimations.push({ timeline: tl, element: textElement });
+    elements.forEach((textElement) => {
+      try {
+        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 });
+      } catch (error) {
+        console.warn("Error creating line split:", error);
+        gsap.set(textElement, { autoAlpha: 1 });
+      }
+    });
+  },
+
+  async animate() {
+    await waitForFonts();
+
+    if (prefersReducedMotion()) {
+      return;
     }
+
+    document
+      .querySelectorAll(".a-line-split > *:first-child")
+      .forEach((textElement) => {
+        try {
+          const lines = textElement.querySelectorAll(".line");
+          const tl = gsap.timeline({
+            scrollTrigger: {
+              trigger: textElement,
+              start: config.lineSplit.start,
+              invalidateOnRefresh: true,
+              toggleActions: "play none none none",
+              once: true,
+            },
+            onComplete: () => {
+              if (textElement.splitTextInstance) {
+                textElement.splitTextInstance.revert();
+                delete textElement.splitTextInstance;
+              }
+            },
+          });
+
+          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 AppearAnimations = {
-    async initial() {
-        await waitForFonts();
+  async initial() {
+    await waitForFonts();
 
-        if (prefersReducedMotion()) {
-            return;
-        }
+    if (prefersReducedMotion()) {
+      return;
+    }
 
-        const elements = document.querySelectorAll('.a-appear');
-        elements.forEach(element => {
-            gsap.set(element, {
-                y: config.appear.y,
-                opacity: 0
-            });
+    const elements = document.querySelectorAll(".a-appear");
+    elements.forEach((element) => {
+      try {
+        gsap.set(element, {
+          y: config.appear.y,
+          opacity: 0,
         });
-    },
+      } catch (error) {
+        console.warn("Error setting appear initial state:", error);
+      }
+    });
+  },
 
-    async animate() {
-        await waitForFonts();
+  async animate() {
+    await waitForFonts();
 
-        if (prefersReducedMotion()) {
-            return;
-        }
+    if (prefersReducedMotion()) {
+      return;
+    }
+
+    document.querySelectorAll(".a-appear").forEach((element) => {
+      try {
+        const tl = gsap.timeline({
+          scrollTrigger: {
+            trigger: element,
+            start: config.appear.start,
+            invalidateOnRefresh: true,
+            toggleActions: "play none none none",
+            once: true,
+          },
+        });
 
-        document.querySelectorAll('.a-appear').forEach(element => {
-            const tl = gsap.timeline({
-                scrollTrigger: {
-                    trigger: element,
-                    start: config.appear.start,
-                    invalidateOnRefresh: false,
-                }
-            });
-
-            tl.to(element, {
-                y: 0,
-                opacity: 1,
-                duration: config.appear.duration,
-                ease: config.appear.ease
-            });
-
-            activeAnimations.push({ timeline: tl, element: element });
+        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 RevealAnimations = {
+  async initial() {
+    await waitForFonts();
+
+    if (prefersReducedMotion()) {
+      return;
     }
+
+    const elements = document.querySelectorAll(".a-reveal");
+    elements.forEach((element) => {
+      try {
+        gsap.set(element, {
+          y: config.reveal.y,
+          opacity: 0,
+        });
+      } catch (error) {
+        console.warn("Error setting reveal initial state:", error);
+      }
+    });
+  },
+
+  async animate() {
+    await waitForFonts();
+
+    if (prefersReducedMotion()) {
+      return;
+    }
+
+    document.querySelectorAll(".a-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);
+      }
+    });
+  },
 };
 
 async function setInitialStates() {
-    await Promise.all([
-        CharSplitAnimations.initial(),
-        WordSplitAnimations.initial(),
-        LineSplitAnimations.initial(),
-        AppearAnimations.initial()
-    ]);
+  await Promise.all([
+    CharSplitAnimations.initial(),
+    WordSplitAnimations.initial(),
+    LineSplitAnimations.initial(),
+    AppearAnimations.initial(),
+    RevealAnimations.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()
-    ]);
+  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(),
+    RevealAnimations.animate(),
+  ]);
 }
 
 export async function init() {
-    if (prefersReducedMotion()) {
-        // For reduced motion, just show elements without animation
-        showElementsWithoutAnimation();
-    } else {
-        await setInitialStates();
-        initAnimations();
-    }
-    
-    let resizeTimeout;
-    let lastWidth = window.innerWidth;
-    window.addEventListener('resize', () => {
-        const currentWidth = window.innerWidth;
-        if (currentWidth !== lastWidth) {
-            lastWidth = currentWidth;
-            clearTimeout(resizeTimeout);
-            resizeTimeout = setTimeout(() => {
-                ScrollTrigger.refresh();
-            }, 300);
-        }
+  // Prevent duplicate initialization
+  const elements = document.querySelectorAll(
+    "[data-hs-anim-text]:not([data-initialized])",
+  );
+  if (
+    elements.length === 0 &&
+    document.querySelectorAll(
+      ".a-char-split:not([data-initialized]), .a-word-split:not([data-initialized]), .a-line-split:not([data-initialized]), .a-appear:not([data-initialized]), .a-reveal:not([data-initialized])",
+    ).length === 0
+  ) {
+    return { result: "anim-text already initialized", destroy: () => {} };
+  }
+
+  // Mark elements as initialized
+  elements.forEach((el) => el.setAttribute("data-initialized", "true"));
+  document
+    .querySelectorAll(
+      ".a-char-split, .a-word-split, .a-line-split, .a-appear, .a-reveal",
+    )
+    .forEach((el) => {
+      el.setAttribute("data-initialized", "true");
     });
 
-    const api = window[API_NAME] || {};
-    api.textAnimations = {
-        config: config,
-        updateConfig: updateConfig,
-        start: startTextAnimations,
-        kill: killTextAnimations,
-        restart: () => {
-            killTextAnimations();
-            startTextAnimations();
+  if (prefersReducedMotion()) {
+    // For reduced motion, just show elements without animation
+    showElementsWithoutAnimation();
+  } else {
+    await setInitialStates();
+    initAnimations();
+  }
+
+  // Set up resize handler with cleanup
+  let lastWidth = window.innerWidth;
+  resizeHandler = () => {
+    const currentWidth = window.innerWidth;
+    if (currentWidth !== lastWidth) {
+      lastWidth = currentWidth;
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => {
+        try {
+          ScrollTrigger.refresh();
+        } catch (error) {
+          console.warn("Error refreshing ScrollTrigger:", error);
         }
-    };
+      }, 300);
+    }
+  };
+  window.addEventListener("resize", resizeHandler);
+
+  // Add page load handler for proper ScrollTrigger refresh timing
+  const handlePageLoad = () => {
+    setTimeout(() => {
+      try {
+        ScrollTrigger.refresh();
+      } catch (error) {
+        console.warn("Error refreshing ScrollTrigger on page load:", error);
+      }
+    }, 100);
+  };
+
+  if (document.readyState === 'complete') {
+    handlePageLoad();
+  } else {
+    window.addEventListener('load', handlePageLoad);
+  }
+
+  // Initialize API with proper checks
+  if (!window[API_NAME]) {
+    window[API_NAME] = {};
+  }
+
+  const api = window[API_NAME];
+  api.textAnimations = {
+    config: config,
+    updateConfig: updateConfig,
+    start: startTextAnimations,
+    kill: killTextAnimations,
+    restart: () => {
+      killTextAnimations();
+      startTextAnimations();
+    },
+    cleanup: () => {
+      killTextAnimations();
+      window.removeEventListener("resize", resizeHandler);
+      clearTimeout(resizeTimeout);
+    },
+  };
+
+  // Return destroy function
+  const destroy = () => {
+    // Kill all animations
+    killTextAnimations();
 
-    return { result: 'anim-text initialized' };
-}
+    // Remove resize handler
+    if (resizeHandler) {
+      window.removeEventListener("resize", resizeHandler);
+    }
+
+    // Clear timeout
+    if (resizeTimeout) {
+      clearTimeout(resizeTimeout);
+    }
+
+    // Remove initialized markers
+    document.querySelectorAll("[data-initialized]").forEach((el) => {
+      el.removeAttribute("data-initialized");
+    });
+
+    // Clean up API
+    if (api.textAnimations) {
+      delete api.textAnimations;
+    }
+  };
+
+  return { result: "anim-text initialized", destroy };
+}