@widelab-nc/widehue 1.0.38 → 1.0.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widelab-nc/widehue",
-  "version": "1.0.38",
+  "version": "1.0.40",
   "description": "Widelab starter template based on Finsweet template + add-ons.",
   "homepage": "https://widelab.co",
   "license": "ISC",

package/src/index.js

@@ -24,12 +24,32 @@ function customGsapEasing() {
 // Contact form open animation
 let contactFormOpen;
 
+// 1. GŁÓWNY PROBLEM: Refresh ScrollTrigger po pełnym załadowaniu
 function refreshScrollTriggersAfterLoad() {
   window.addEventListener('load', () => {
     console.log('[ScrollTrigger] Page fully loaded — refreshing all triggers');
+
+    // ZWIĘKSZ DELAY dla Safari
     setTimeout(() => {
       ScrollTrigger.refresh();
-    }, 100); // bufor na przypadkowe opóźnienia, możesz zwiększyć
+
+      // DODATKOWY refresh dla Safari
+      if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
+        setTimeout(() => {
+          ScrollTrigger.refresh();
+          console.log('[Safari] Additional ScrollTrigger refresh');
+        }, 500);
+      }
+    }, 200); // Zwiększone z 100ms do 200ms
+  });
+
+  // DODAJ refresh na resize dla Safari
+  window.addEventListener('resize', () => {
+    if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
+      setTimeout(() => {
+        ScrollTrigger.refresh();
+      }, 100);
+    }
   });
 }
 
@@ -89,12 +109,30 @@ const lenis = new Lenis({
   duration: 1.2,
   easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
 });
+
+
+// 2. POPRAWKA DLA LENIS + Safari
 function lenisScroll() {
-  lenis.on('scroll', ScrollTrigger.update);
-  gsap.ticker.add((time)=>{
-    lenis.raf(time * 1000)
-  })
-  gsap.ticker.lagSmoothing(0)
+  // Sprawdź czy to Safari
+  const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
+  lenis.on('scroll', (e) => {
+    ScrollTrigger.update();
+
+    // Dodatkowe wymuszenie update dla Safari
+    if (isSafari) {
+      requestAnimationFrame(() => {
+        ScrollTrigger.update();
+      });
+    }
+  });
+
+  gsap.ticker.add((time) => {
+    lenis.raf(time * 1000);
+  });
+
+  gsap.ticker.lagSmoothing(0);
+
   function raf(time) {
     lenis.raf(time);
     requestAnimationFrame(raf);
@@ -102,6 +140,8 @@ function lenisScroll() {
   requestAnimationFrame(raf);
 }
 
+
+
 // Lazy load videos
 function lazyLoadVideos() {
   let lazyVideos = [].slice.call(document.querySelectorAll("video.lazyload"));
@@ -174,8 +214,51 @@ function revealFooter() {
   }
 }
 
+
+// Check if element exists in DOM
+function checkElementExists(selector) {
+  const element = document.querySelector(selector);
+  if (!element) {
+    console.warn(`Element ${selector} not found - skipping animation`);
+    return false;
+  }
+  return true;
+}
+
+// Fallback function when loader elements don't exist
+function initBasicAnimations() {
+  console.log('Initializing basic animations without loader');
+
+  if (typeof lenis !== 'undefined') {
+    try {
+      lenis.scrollTo(0, { immediate: true });
+      lenis.start();
+    } catch (e) {
+      console.warn('Lenis initialization failed:', e);
+      window.scrollTo(0, 0);
+    }
+  } else {
+    window.scrollTo(0, 0);
+  }
+}
+
+// 5. ULEPSZONE pageLoadAnimation
 function pageLoadAnimation() {
-  console.log('pageLoadAnimation function called'); // Trace when the function is invoked
+  console.log('pageLoadAnimation function called');
+
+  const requiredElements = [
+    '.loader_ract.is-left',
+    '.loader_ract.is-right',
+    '.loader_wrapper'
+  ];
+
+  const allElementsExist = requiredElements.every(selector => checkElementExists(selector));
+
+  if (!allElementsExist) {
+    console.warn('Loader elements not found - skipping loader animation');
+    initBasicAnimations();
+    return;
+  }
 
   const loaderAnimationIn = gsap.timeline({});
   console.log('GSAP timeline created');
@@ -184,7 +267,28 @@ function pageLoadAnimation() {
     .add(function() {
       console.log('First animation step triggered: scrollRestoration and scrollTo');
       history.scrollRestoration = 'manual';
-      lenis.scrollTo(0);
+
+      // POPRAWKA: Lepszy scroll to top dla Safari
+      const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
+      if (typeof lenis !== 'undefined' && lenis.scrollTo) {
+        try {
+          lenis.scrollTo(0, { immediate: true });
+
+          // Dodatkowe wymuszenie dla Safari
+          if (isSafari) {
+            setTimeout(() => {
+              window.scrollTo(0, 0);
+              lenis.scrollTo(0, { immediate: true });
+            }, 50);
+          }
+        } catch (e) {
+          console.warn('Lenis scrollTo failed, using fallback:', e);
+          window.scrollTo(0, 0);
+        }
+      } else {
+        window.scrollTo(0, 0);
+      }
     })
     .to(
       '.loader_ract.is-left',
@@ -207,7 +311,14 @@ function pageLoadAnimation() {
     )
     .add(function() {
       console.log('lenis started');
-      lenis.start();
+      if (typeof lenis !== 'undefined' && lenis.start) {
+        lenis.start();
+
+        // Refresh ScrollTrigger po starcie lenis
+        setTimeout(() => {
+          ScrollTrigger.refresh();
+        }, 100);
+      }
     }, '>')
     .to('.loader_wrapper', {
       display: 'none',
@@ -219,18 +330,19 @@ function pageLoadAnimation() {
 
   console.log('Animation timeline defined');
 
-  // Update on screen resize
   window.addEventListener('resize', function () {
     console.log('Window resize event triggered');
     setTimeout(function () {
-      console.log('Set .loader_wrapper to display:none on resize');
-      gsap.set('.loader_wrapper', { display: 'none' });
+      if (document.querySelector('.loader_wrapper')) {
+        console.log('Set .loader_wrapper to display:none on resize');
+        gsap.set('.loader_wrapper', { display: 'none' });
+      }
     }, 50);
   });
-
-  console.log('Resize event listener added');
 }
 
+
+
 // Page transition animation
 function pageTransitionAnimation() {
   const transitionLinks = document.querySelectorAll(
@@ -439,37 +551,60 @@ window.heroAnimationOnLoad = function(e) {
     console.log('Page reloaded; session flag cleared.');
   }
 
+  // POPRAWKA: Ustaw initial state przed SplitText
   gsap.set('.wideletter', { y: '-150%', scale: 1 });
+  gsap.set('#heroHeading', { opacity: 0 }); // DODANE
 
+  // POPRAWKA: Scroll to top z większym delay dla Safari
   if (typeof lenis !== 'undefined') {
     console.log('Lenis instance found, attempting to scroll to top');
+
+    const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+    const delay = isSafari ? 300 : 100; // Większy delay dla Safari
+
     setTimeout(() => {
       lenis.scrollTo(0, { duration: 0, easing: (t) => t });
       console.log('Lenis scrollTo action called after delay');
-    }, 100);
-  } else {
-    console.log('Lenis instance not found');
+    }, delay);
   }
 
   const videoMask = e.querySelector('.hero_headline_ract-mask');
   const video = e.querySelector('video.lazyload');
   const heroAnimation = gsap.timeline({});
-  const homeHeroHeading = new SplitText('#heroHeading', {
-    type: 'lines',
-    linesClass: 'hero-line',
-  });
-  const homeHeroHeadingMask = new SplitText('#heroHeading', {
-    type: 'lines',
-    linesClass: 'hero-line-mask',
-  });
 
-  const heroLines = document.querySelectorAll('.hero-line');
+  // POPRAWKA: Dodaj fallback jeśli SplitText nie działa
+  let homeHeroHeading, homeHeroHeadingMask, heroLines;
+
+  try {
+    homeHeroHeading = new SplitText('#heroHeading', {
+      type: 'lines',
+      linesClass: 'hero-line',
+    });
+    homeHeroHeadingMask = new SplitText('#heroHeading', {
+      type: 'lines',
+      linesClass: 'hero-line-mask',
+    });
+
+    heroLines = document.querySelectorAll('.hero-line');
+
+    if (heroLines.length === 0) {
+      throw new Error('SplitText failed to create lines');
+    }
+  } catch (error) {
+    console.error('SplitText error:', error);
+    // Fallback: użyj oryginalnego elementu
+    heroLines = [document.querySelector('#heroHeading')];
+    if (heroLines[0]) {
+      heroLines[0].classList.add('hero-line');
+    }
+  }
+
   if (heroLines.length === 0) {
     console.error('GSAP target .hero-line not found.');
     return;
   }
 
-  // Handle video source replacement based on viewport width
+  // Reszta funkcji bez zmian...
   function updateVideoSources() {
     const isMobile = window.innerWidth < 992;
     const mobileMp4 = video.getAttribute('mobile-mp4');
@@ -485,24 +620,19 @@ window.heroAnimationOnLoad = function(e) {
         webmSource.setAttribute('data-src', mobileWebm);
       }
     } else {
-      // Revert to desktop sources if necessary
       mp4Source.setAttribute('data-src', mp4Source.getAttribute('data-src').replace('mobile-', ''));
       webmSource.setAttribute('data-src', webmSource.getAttribute('data-src').replace('mobile-', ''));
     }
   }
 
-  // Initial call to update video sources
   updateVideoSources();
-
-  // Add event listener for window resize to update video sources
   window.addEventListener('resize', updateVideoSources);
 
   if (video) {
-    // Prevent the video from autoplaying when lazy-loaded
     video.setAttribute('data-no-autoplay', 'true');
     video.addEventListener('loadeddata', () => {
       if (video.hasAttribute('data-no-autoplay')) {
-        video.pause(); // Ensure the video is paused if it loads
+        video.pause();
       }
     });
   }
@@ -516,7 +646,6 @@ window.heroAnimationOnLoad = function(e) {
 
     heroAnimation.to('.navbar_brand_lottie', {
       duration: 1.5,
-      progress: 1,
       onComplete: function() {
         console.log('Lottie animation completed');
         gsap.to('.navbar_brand_lottie', { opacity: 0, duration: 0.25 });
@@ -576,6 +705,33 @@ window.heroAnimationOnLoad = function(e) {
   console.log('Animation timeline setup completed');
 }
 
+// 4. DODAJ GLOBAL FIX dla Safari
+function initSafariFixes() {
+  const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
+  if (isSafari) {
+    console.log('Safari detected - applying fixes');
+
+    // Fix dla viewport height na mobile Safari
+    const fixViewportHeight = () => {
+      const vh = window.innerHeight * 0.01;
+      document.documentElement.style.setProperty('--vh', `${vh}px`);
+    };
+
+    fixViewportHeight();
+    window.addEventListener('resize', fixViewportHeight);
+    window.addEventListener('orientationchange', () => {
+      setTimeout(fixViewportHeight, 100);
+    });
+
+    // Dodatkowy refresh ScrollTrigger po orientationchange
+    window.addEventListener('orientationchange', () => {
+      setTimeout(() => {
+        ScrollTrigger.refresh();
+      }, 300);
+    });
+  }
+}
 
 window.briefContact = function(e) {
   const button = document.querySelector('.brief-button');