@widelab-nc/widehue 1.0.45 → 1.0.46

package/package.json

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

package/src/index.js

@@ -7,12 +7,9 @@ import { CustomEase } from "gsap/CustomEase";
 import { SplitText } from 'gsap/SplitText';
 import Splide from '@splidejs/splide';
 
-
 // GSAP plugins register and custom easing
 gsap.registerPlugin(ScrollTrigger, ScrollToPlugin, CustomEase, SplitText);
 
-console.log('SplitText:', typeof SplitText);
-console.log('Registered plugins:', gsap.plugins);
 
 function customGsapEasing() {
   CustomEase.create('loader', '0.83, 0, 0.17, 1');
@@ -27,7 +24,6 @@ let contactFormOpen;
 
 function refreshScrollTriggersAfterLoad() {
   window.addEventListener('load', () => {
-    console.log('[ScrollTrigger] Page fully loaded — refreshing all triggers');
     setTimeout(() => {
       ScrollTrigger.refresh();
     }, 100); // bufor na przypadkowe opóźnienia, możesz zwiększyć
@@ -66,9 +62,6 @@ function contactFormOpenAnimation() {
 
         if (checkboxElement) {
           checkboxElement.click(); // Click on the checkbox element
-          console.log(`Clicked on checkbox for ${projectCategoryValue}`);
-        } else {
-          console.log(`No checkbox found for ${projectCategoryValue}`);
         }
       });
     });
@@ -91,6 +84,19 @@ const lenis = new Lenis({
   easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
 });
 function lenisScroll() {
+  // Configure ScrollTrigger to use Lenis as the scroller
+  ScrollTrigger.scrollerProxy(window, {
+    scrollTop(value) {
+      if (arguments.length) {
+        lenis.scrollTo(value, { immediate: true });
+      }
+      return lenis.scroll || lenis.actualScroll || window.pageYOffset || 0;
+    },
+    getBoundingClientRect() {
+      return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight };
+    }
+  });
+
   lenis.on('scroll', ScrollTrigger.update);
   gsap.ticker.add((time)=>{
     lenis.raf(time * 1000)
@@ -180,7 +186,6 @@ function revealFooter() {
 function checkElementExists(selector) {
   const element = document.querySelector(selector);
   if (!element) {
-    console.warn(`Element ${selector} not found - skipping animation`);
     return false;
   }
   return true;
@@ -188,14 +193,12 @@ function checkElementExists(selector) {
 
 // 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 {
@@ -204,7 +207,6 @@ function initBasicAnimations() {
 }
 
 function pageLoadAnimation() {
-  console.log('pageLoadAnimation function called');
 
   // Check if all required loader elements exist
   const requiredElements = [
@@ -222,11 +224,9 @@ function pageLoadAnimation() {
   }
 
   const loaderAnimationIn = gsap.timeline({});
-  console.log('GSAP timeline created');
 
   loaderAnimationIn
     .add(function() {
-      console.log('First animation step triggered: scrollRestoration and scrollTo');
       history.scrollRestoration = 'manual';
 
       // Safari-safe scroll to top
@@ -234,7 +234,6 @@ function pageLoadAnimation() {
         try {
           lenis.scrollTo(0, { immediate: true });
         } catch (e) {
-          console.warn('Lenis scrollTo failed, using fallback:', e);
           window.scrollTo(0, 0);
         }
       } else {
@@ -261,7 +260,6 @@ function pageLoadAnimation() {
       '<'
     )
     .add(function() {
-      console.log('lenis started');
       if (typeof lenis !== 'undefined' && lenis.start) {
         lenis.start();
       }
@@ -270,26 +268,20 @@ function pageLoadAnimation() {
       display: 'none',
       duration: 0.1,
       onComplete: function() {
-        console.log('.loader_wrapper set to display:none');
       }
     }, '>');
 
-  console.log('Animation timeline defined');
 
   // Update on screen resize - with element existence check
   window.addEventListener('resize', function () {
-    console.log('Window resize event triggered');
     setTimeout(function () {
       if (document.querySelector('.loader_wrapper')) {
-        console.log('Set .loader_wrapper to display:none on resize');
         gsap.set('.loader_wrapper', { display: 'none' });
       } else {
-        console.warn('Loader wrapper not found on resize');
       }
     }, 50);
   });
 
-  console.log('Resize event listener added');
 }
 
 
@@ -431,22 +423,10 @@ window.standardHeaderScrollAnimation = function() {
   const leaveBackTimeline = gsap.timeline({ paused: true });
 
   enterTimeline
-    .to('.navbar_brand.scale', { scale: 0.25, duration: 1 })
-    .to('.wideletter', {
-      y: '-150%',
-      duration: 1,
-      ease: 'loader2',
-      stagger: 0.1,
-    }, 0); // 0 to start simultaneously with the previous animation
+    .to('.navbar_brand.scale', { scale: 0.25, duration: 1 });
 
   leaveBackTimeline
-    .to('.navbar_brand.scale', { scale: 1, duration: 1 })
-    .to('.wideletter', {
-      y: '0%',
-      duration: 1,
-      ease: 'loader2',
-      stagger: 0.1,
-    }, 0);
+    .to('.navbar_brand.scale', { scale: 1, duration: 1 });
 
   ScrollTrigger.create({
     start: 'top+=100 top', // Triggers when the user has scrolled 100px
@@ -493,134 +473,177 @@ window.customCursorText = function(e) {
 
 
 window.heroAnimationOnLoad = function(e) {
-  console.log('heroAnimationOnLoad function started');
-
-  const hasPlayedAnimation = window.name.includes('heroPlayed');
+  const video = document.getElementById('herovideo');
 
   gsap.set('.wideletter', { y: '-150%', scale: 1 });
 
   if (typeof lenis !== 'undefined') {
-    console.log('Lenis instance found, attempting to scroll to top');
-    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');
-  }
-
-  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');
-  if (heroLines.length === 0) {
-    console.error('GSAP target .hero-line not found.');
-    return;
+    setTimeout(() => lenis.scrollTo(0, { duration: 0, easing: (t) => t }), 100);
   }
 
-  function updateVideoSources() {
-    const isMobile = window.innerWidth < 992;
-    const mobileMp4 = video.getAttribute('mobile-mp4');
-    const mobileWebm = video.getAttribute('mobile-webm');
-    const mp4Source = video.querySelector('source[type="video/mp4"]');
-    const webmSource = video.querySelector('source[type="video/webm"]');
-
-    if (isMobile) {
-      if (mobileMp4) mp4Source.setAttribute('data-src', mobileMp4);
-      if (mobileWebm) webmSource.setAttribute('data-src', mobileWebm);
-    } else {
-      mp4Source.setAttribute('data-src', mp4Source.getAttribute('data-src').replace('mobile-', ''));
-      webmSource.setAttribute('data-src', webmSource.getAttribute('data-src').replace('mobile-', ''));
-    }
-  }
-
-  updateVideoSources();
-  window.addEventListener('resize', updateVideoSources);
-
+  let videoPlayListener = null;
   if (video) {
+    video.pause();
+    video.currentTime = 0;
+    function updateVideoSources() {
+      const isMobile = window.innerWidth < 992;
+      const mobileMp4 = video.getAttribute('mobile-mp4');
+      const mobileWebm = video.getAttribute('mobile-webm');
+      const mp4Source = video.querySelector('source[type="video/mp4"]');
+      const webmSource = video.querySelector('source[type="video/webm"]');
+      if (mobileMp4 && mp4Source) mp4Source.setAttribute('data-src', mobileMp4);
+      if (mobileWebm && webmSource) webmSource.setAttribute('data-src', mobileWebm);
+      if (!isMobile && mp4Source) mp4Source.setAttribute('data-src', mp4Source.getAttribute('data-src')?.replace('mobile-', '') || '');
+      if (!isMobile && webmSource) webmSource.setAttribute('data-src', webmSource.getAttribute('data-src')?.replace('mobile-', '') || '');
+    }
+    updateVideoSources();
+    window.addEventListener('resize', updateVideoSources);
     video.setAttribute('data-no-autoplay', 'true');
     video.addEventListener('loadeddata', () => {
       if (video.hasAttribute('data-no-autoplay')) {
         video.pause();
+        video.currentTime = 0;
       }
     });
+    videoPlayListener = () => {
+      console.log('[heroAnimationOnLoad] Video play event! currentTime:', video.currentTime);
+      if (video.hasAttribute('data-no-autoplay')) {
+        console.log('[heroAnimationOnLoad] Video has data-no-autoplay, forcing pause');
+        video.pause();
+        video.currentTime = 0;
+      }
+    };
+    video.addEventListener('play', videoPlayListener);
+  } else {
   }
 
-  if (!hasPlayedAnimation) {
-    console.log('Initial settings applied to hero lines');
+  function run() {
+    const introBrand = document.querySelector('.preloader [intro-brand]');
+    const preloader = introBrand ? introBrand.closest('.preloader') : document.querySelector('.preloader');
+    const wrapIt = document.querySelector('.wrap-it') || preloader?.closest('.wrap-it') || preloader;
+    const introSubtitle = preloader ? preloader.querySelector('[intro-subtitle]') : null;
+    const widelettersIntro = introBrand ? introBrand.querySelectorAll('.wideletter-intro') : [];
+
+    let savedScrollY = 0;
+    const preventScroll = (e) => e.preventDefault();
+
+    function lockScroll() {
+      savedScrollY = window.scrollY || document.documentElement.scrollTop;
+      document.body.style.position = 'fixed';
+      document.body.style.top = `-${savedScrollY}px`;
+      document.body.style.left = '0';
+      document.body.style.right = '0';
+      document.body.style.width = '100%';
+      document.body.style.overflow = 'hidden';
+      document.documentElement.style.overflow = 'hidden';
+      history.scrollRestoration = 'manual';
+      if (typeof lenis !== 'undefined' && lenis.stop) lenis.stop();
+      document.addEventListener('wheel', preventScroll, { passive: false });
+      document.addEventListener('touchmove', preventScroll, { passive: false });
+    }
 
-    gsap.set('.navbar_brand_lottie', { opacity: 1 });
-    gsap.set('#heroHeading', { opacity: 0 });
-    gsap.set('.hero-line', { y: '100%' });
+    // Lock scroll IMMEDIATELY at the start - before any animation
+    lockScroll();
 
-    heroAnimation.to('.navbar_brand_lottie', {
-      duration: 1.5,
-      onComplete: function() {
-        console.log('Lottie animation completed');
-        gsap.to('.navbar_brand_lottie', { opacity: 0, duration: 0.25 });
-      }
-    });
+    function unlockScroll() {
+      document.body.style.position = '';
+      document.body.style.top = '';
+      document.body.style.left = '';
+      document.body.style.right = '';
+      document.body.style.width = '';
+      document.body.style.overflow = '';
+      document.documentElement.style.overflow = '';
+      document.removeEventListener('wheel', preventScroll);
+      document.removeEventListener('touchmove', preventScroll);
+      window.scrollTo(0, savedScrollY);
+      if (typeof lenis !== 'undefined' && lenis.start) lenis.start();
+    }
 
-    heroAnimation.to('#heroHeading', {
-      opacity: 1,
-      duration: 0.1,
-      ease: 'none',
-    }, '+=0.1');
+    const heroAnimation = gsap.timeline({});
+
+    if (preloader && introBrand && introSubtitle && widelettersIntro.length > 0) {
+      gsap.set(widelettersIntro, { y: '-150%' });
+
+      heroAnimation.to({}, { duration: 0.1 });
+      heroAnimation.set('.grab', { opacity: 1 });
+      heroAnimation.set(introBrand, { opacity: 1 });
+      heroAnimation.to(widelettersIntro, { y: '0%', duration: 1, ease: 'loader2', stagger: 0.1 });
+      heroAnimation.to({}, { duration: 1 });
+      heroAnimation.to(widelettersIntro, { y: '-150%', opacity: 0, duration: 0.6, ease: 'power2.in', stagger: 0.03 });
+      heroAnimation.fromTo(introSubtitle, { y: '50%', opacity: 0 }, { y: '0%', opacity: 1, duration: 0.6, ease: 'power2.out' });
+      heroAnimation.to({}, { duration: 2 });
+      // 5. .wrap-it: height 100vh → 0vh (2s). Video play na START animacji height.
+      // Set position: absolute before height animation to prevent body height change
+      // NOTE: lockScroll() is already called at the start of run() function
+      heroAnimation.set(wrapIt, { position: 'absolute', top: 0, left: 0, width: '100%', height: '100vh', overflow: 'hidden', zIndex: 9999 });
+      heroAnimation.to(wrapIt, {
+        height: '0vh',
+        duration: 2,
+        ease: 'power2.out',
+        onStart: () => {
+          if (video) {
+            video.currentTime = 0;
+            // Remove attribute and play listener before playing to prevent conflicts
+            video.removeAttribute('data-no-autoplay');
+            if (videoPlayListener) {
+              video.removeEventListener('play', videoPlayListener);
+            }
+            video.play().then(() => {
+            }).catch(err => {
+            });
+          }
+        },
+        onComplete: () => {
+          unlockScroll();
+          gsap.set(wrapIt, { visibility: 'hidden', pointerEvents: 'none' });
+          // Refresh ScrollTrigger after height animation completes to recalculate positions
+          ScrollTrigger.refresh();
+        },
+      });
+    } else if (wrapIt) {
+      // NOTE: lockScroll() is already called at the start of run() function
+      heroAnimation.set(wrapIt, { position: 'absolute', top: 0, left: 0, width: '100%', height: '100vh', overflow: 'hidden', zIndex: 9999 });
+      heroAnimation.to(wrapIt, {
+        height: '0vh',
+        duration: 2,
+        ease: 'power2.out',
+        onStart: () => {
+          if (video) {
+            video.currentTime = 0;
+            video.removeAttribute('data-no-autoplay');
+            if (videoPlayListener) {
+              video.removeEventListener('play', videoPlayListener);
+            }
+            video.play();
+          }
+        },
+        onComplete: () => {
+          unlockScroll();
+          gsap.set(wrapIt, { visibility: 'hidden', pointerEvents: 'none' });
+          // Refresh ScrollTrigger after height animation completes to recalculate positions
+          ScrollTrigger.refresh();
+        },
+      });
+    }
 
-    heroAnimation.fromTo('.hero-line', {
-      y: '100%'
-    }, {
-      duration: 0.75,
-      y: '0%',
-      stagger: 0.2,
-      ease: 'loader2',
-    }, '<');
+    heroAnimation.from('#heroBottomWrapper', { opacity: 0, duration: 1, ease: 'loader2' }, '>-0.4');
 
-    heroAnimation.to('#heroHeading', {
-      opacity: 0,
-      duration: 0.3,
-      ease: 'loader2',
-    }, '+=1');
+    // Literki IN as last step in timeline (initial state)
+    const wideletters = document.querySelectorAll('.wideletter');
+    if (wideletters.length > 0) {
+      heroAnimation.fromTo(wideletters,
+        { y: '-150%', opacity: 0 },
+        { y: '0%', opacity: 1, duration: 1, ease: 'loader2', stagger: 0.1 },
+        '>-0.6'
+      );
+    }
+  }
 
-    window.name += 'heroPlayed;';
+  if (document.readyState === 'complete') {
+    run();
   } else {
-    console.log('Skipping initial hero line animations as they have already been played in this session');
+    window.addEventListener('load', run);
   }
-
-  heroAnimation.to('.preloader', {
-    scaleY: 0,
-    display: "none",
-    duration: 1,
-    ease: 'loader',
-  });
-
-  heroAnimation.fromTo('.wideletter',
-    { y: '-150%', scale: 1 },
-    { y: '0%', duration: 1, ease: 'loader2', stagger: 0.1 },
-    '-=0.5')
-    .call(() => {
-      if (video) {
-        video.removeAttribute('data-no-autoplay');
-        video.play();
-      }
-    }, null, '<');
-
-  heroAnimation.from('#heroBottomWrapper', {
-    opacity: 0,
-    duration: 1,
-    ease: 'loader2',
-  }, '>-0.4');
-
-  console.log('Animation timeline setup completed');
 };
 
 
@@ -745,7 +768,6 @@ window.textScroll = function(e) {
   // Ensure .hero-line elements are created
   const heroLines = document.querySelectorAll('.hero-line');
   if (heroLines.length === 0) {
-    console.error('GSAP target .hero-line not found.');
     return;
   }
 
@@ -1479,12 +1501,9 @@ window.animationTest4 = function(root) {
 
 
 window.pricingInteraction = function(e) {
-  console.log('[pricingInteraction] Function called');
-  console.log('[pricingInteraction] Window width:', window.innerWidth);
 
   // Check if the screen width is 992px or wider
   if (window.innerWidth >= 992) {
-    console.log('[pricingInteraction] Desktop mode - creating pin');
 
     const tabsContent = document.querySelector('.tabs-content');
     const tabsMenu = document.querySelector('.tabs-menu');
@@ -1493,23 +1512,12 @@ window.pricingInteraction = function(e) {
     console.log('[pricingInteraction] .tabs-menu found:', tabsMenu);
 
     if (!tabsContent || !tabsMenu) {
-      console.error('[pricingInteraction] Required elements not found!');
       return;
     }
 
     // Debug computed styles
     const tabsContentStyles = window.getComputedStyle(tabsContent);
     const tabsMenuStyles = window.getComputedStyle(tabsMenu);
-    console.log('[pricingInteraction] .tabs-content styles:', {
-      position: tabsContentStyles.position,
-      height: tabsContentStyles.height,
-      display: tabsContentStyles.display,
-    });
-    console.log('[pricingInteraction] .tabs-menu styles:', {
-      position: tabsMenuStyles.position,
-      height: tabsMenuStyles.height,
-      display: tabsMenuStyles.display,
-    });
 
     // Create the pinning effect
     const trigger = ScrollTrigger.create({
@@ -1520,9 +1528,6 @@ window.pricingInteraction = function(e) {
 
     });
 
-    console.log('[pricingInteraction] ScrollTrigger created:', trigger);
-  } else {
-    console.log('[pricingInteraction] Mobile mode - skipping pin');
   }
 };
 
@@ -1537,7 +1542,6 @@ window.caseStudyInteraction = function(e) {
   // Video mask animation
   const mask = e.querySelector('.portfolio_item_image-mask');
   if (!mask) {
-    console.error('Mask element not found in:', e);
     return;
   }
 
@@ -1560,7 +1564,6 @@ window.caseStudyInteraction = function(e) {
   if (window.innerWidth > 992) {
     videoElements.forEach(videoElement => {
       if (!videoElement) {
-        console.error('No video element found in:', e);
         return;
       }
 
@@ -2324,7 +2327,6 @@ window.heroSliders = function(e) {
     },
   };
   const slider = new Splide(e, config).mount();
-  console.log("Splide instance:", slider);
 
   if (window.innerWidth > 992) {
     slider.on('click', function () {
@@ -2634,64 +2636,32 @@ window.closeInfoBar = function() {
 
 
 // Hero 2026 animation - navbar letters on scroll
-// EXPERIMENTAL: play/reverse version (to revert: replace this whole function with scrub version)
 window.heroAnimation2026 = function(e) {
   const wideletters = document.querySelectorAll('.wideletter');
-  const introSection = document.querySelector('[x-init*="introAnimation"]');
-
-  if (!introSection) return;
+  if (wideletters.length === 0) return;
 
-  // Wideletters animation timeline (paused)
-  const widelettersTimeline = gsap.timeline({ paused: true });
-  widelettersTimeline.fromTo(wideletters,
-    { y: '-150%' },
+  // Timeline for letters OUT
+  const lettersOutTimeline = gsap.timeline({ paused: true });
+  lettersOutTimeline.fromTo(wideletters,
+    { y: '0%', opacity: 1 },
     {
-      y: '0%',
-      duration: 0.8,
-      ease: 'power2.out',
-      stagger: 0.05,
+      y: '-150%',
+      opacity: 0,
+      duration: 0.6,
+      ease: 'power2.in',
+      stagger: 0.03,
     }
   );
 
-  // Trigger for wideletters
-  ScrollTrigger.create({
-    trigger: introSection,
-    start: 'bottom bottom-=25%',
-    onEnter: () => widelettersTimeline.play(),
-    onLeaveBack: () => widelettersTimeline.reverse(),
-  });
-
-  // Partner section animation
-  const partnerSection = document.querySelector('#partner');
-  const heroFlex = document.querySelector('.hero-flex');
-  const coverBg = document.querySelector('.cover-bg');
-
-  if (!partnerSection || !heroFlex || !coverBg) return;
-
-  // Partner timeline (cover-bg + wideletters reverse)
-  const partnerTimeline = gsap.timeline({ paused: true });
-
-  // Cover-bg fade-in
-  partnerTimeline.fromTo(coverBg,
-    { opacity: 0 },
-    { opacity: 1, duration: 0.6, ease: 'power2.out' },
-    0
-  );
+  // Trigger: .update26 top reaches 80% viewport → letters OUT, scroll back → reverse
+  const update26 = document.querySelector('.update26');
+  if (!update26) return;
 
-  // Reverse wideletters
-  partnerTimeline.to(wideletters, {
-    y: '-150%',
-    duration: 0.6,
-    ease: 'power2.in',
-    stagger: 0.03,
-  }, 0);
-
-  // Trigger for partner timeline
   ScrollTrigger.create({
-    trigger: partnerSection,
+    trigger: update26,
     start: 'top 80%',
-    onEnter: () => partnerTimeline.play(),
-    onLeaveBack: () => partnerTimeline.reverse(),
+    onEnter: () => lettersOutTimeline.play(),
+    onLeaveBack: () => lettersOutTimeline.reverse(),
   });
 };
 
@@ -2836,12 +2806,13 @@ function gsapTitleAnimation() {
       ease: 'loader2',
     });
 
-    // Create ScrollTrigger with play/reverse
+    // Create ScrollTrigger with play only
     ScrollTrigger.create({
       trigger: titleElement,
       start: 'top 80%',
-      onEnter: () => titleTimeline.play(),
-      onLeaveBack: () => titleTimeline.reverse(),
+      animation: titleTimeline,
+      toggleActions: 'play',
+      invalidateOnRefresh: true,
     });
   });
 }
@@ -2871,12 +2842,13 @@ function gsapContainerAnimation() {
       ease: 'power3.out',
     });
 
-    // Create ScrollTrigger with play/reverse
+    // Create ScrollTrigger with play only
     ScrollTrigger.create({
       trigger: container,
       start: 'top 80%',
-      onEnter: () => containerTimeline.play(),
-      onLeaveBack: () => containerTimeline.reverse(),
+      animation: containerTimeline,
+      toggleActions: 'play',
+      invalidateOnRefresh: true,
     });
   });
 }
@@ -2900,12 +2872,13 @@ function gsapFadeAnimation() {
       ease: 'power3.out',
     });
 
-    // Create ScrollTrigger with play/reverse
+    // Create ScrollTrigger with play only
     ScrollTrigger.create({
       trigger: element,
       start: 'top 65%',
-      onEnter: () => fadeTimeline.play(),
-      onLeaveBack: () => fadeTimeline.reverse(),
+      animation: fadeTimeline,
+      toggleActions: 'play',
+      invalidateOnRefresh: true,
     });
   });
 }
@@ -2933,9 +2906,14 @@ window.Webflow.push(() => {
   contactFormOpenAnimation();
   openContactFormFromURL();
   disableScrollMenu();
-  gsapTitleAnimation();
-  gsapContainerAnimation();
-  gsapFadeAnimation();
+  // Wait for DOM to be fully ready before creating ScrollTriggers
+  setTimeout(() => {
+    gsapTitleAnimation();
+    gsapContainerAnimation();
+    gsapFadeAnimation();
+    // Refresh ScrollTrigger after creating all triggers to sync with Lenis
+    ScrollTrigger.refresh();
+  }, 200);
   refreshScrollTriggersAfterLoad();
 
 });