@widelab-nc/widehue 1.0.44 → 1.0.46

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;
-  }
-
-  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-', ''));
-    }
+    setTimeout(() => lenis.scrollTo(0, { duration: 0, easing: (t) => t }), 100);
   }
 
-  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');
-
-    gsap.set('.navbar_brand_lottie', { opacity: 1 });
-    gsap.set('#heroHeading', { opacity: 0 });
-    gsap.set('.hero-line', { y: '100%' });
+  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 });
+    }
 
-    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 });
-      }
-    });
+    // Lock scroll IMMEDIATELY at the start - before any animation
+    lockScroll();
+
+    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,16 +1501,33 @@ window.animationTest4 = function(root) {
 
 
 window.pricingInteraction = function(e) {
+
   // Check if the screen width is 992px or wider
   if (window.innerWidth >= 992) {
+
+    const tabsContent = document.querySelector('.tabs-content');
+    const tabsMenu = document.querySelector('.tabs-menu');
+
+    console.log('[pricingInteraction] .tabs-content found:', tabsContent);
+    console.log('[pricingInteraction] .tabs-menu found:', tabsMenu);
+
+    if (!tabsContent || !tabsMenu) {
+      return;
+    }
+
+    // Debug computed styles
+    const tabsContentStyles = window.getComputedStyle(tabsContent);
+    const tabsMenuStyles = window.getComputedStyle(tabsMenu);
+
     // Create the pinning effect
-    ScrollTrigger.create({
+    const trigger = ScrollTrigger.create({
       trigger: ".tabs-content",
-      start: "top-=48px top", // Start pinning 48px after the top of the .tabs-content hits the top of the viewport
-      end: "bottom bottom", // Stop pinning when the bottom of the .tabs-content hits the bottom of the viewport
-      pin: ".tabs-menu", // The element to pin
-      pinSpacing: false // Maintain space for pinned element (optional)
+      start: "top-=48px top",
+      end: "bottom bottom",
+      pin: ".tabs-menu",
+
     });
+
   }
 };
 
@@ -1503,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;
   }
 
@@ -1526,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;
       }
 
@@ -2290,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 () {
@@ -2527,6 +2563,42 @@ window.formSubmitAnimation = function(e) {
   observeDisplayChanges();
 }
 
+// Scrubbed timeline: progress tied to scroll progress
+window.initBentoRevealScrub = function (container) {
+  // Respect reduced motion
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+    container.querySelectorAll(':scope > *').forEach(el => {
+      el.style.opacity = 1;
+      el.style.transform = 'none';
+    });
+    return;
+  }
+
+  const items = Array.from(container.children); // direct children only
+
+  // Important: define from state in timeline for scrub to interpolate smoothly
+  const tl = gsap.timeline({
+    scrollTrigger: {
+      trigger: container,
+      start: 'top 90%',     // start easing in slightly later
+      end: 'bottom 65%',    // full reveal by near the end of container
+      scrub: 0.5,           // smoothing; use true for no smoothing
+      markers: false,     // uncomment for debugging
+    }
+  });
+
+  tl.fromTo(items,
+    { opacity: 0, y: 28 },
+    {
+      opacity: 1,
+      y: 0,
+      ease: 'power2.out',
+      // Duration is ignored by scrub; timeline length maps to scroll distance.
+      // Stagger distributes the items across the timeline for a nice cascade.
+      stagger: { each: 0.12 }
+    }
+  );
+};
 
 
 // Refresh Gsap scrollTriggers
@@ -2563,6 +2635,254 @@ window.closeInfoBar = function() {
 }
 
 
+// Hero 2026 animation - navbar letters on scroll
+window.heroAnimation2026 = function(e) {
+  const wideletters = document.querySelectorAll('.wideletter');
+  if (wideletters.length === 0) return;
+
+  // Timeline for letters OUT
+  const lettersOutTimeline = gsap.timeline({ paused: true });
+  lettersOutTimeline.fromTo(wideletters,
+    { y: '0%', opacity: 1 },
+    {
+      y: '-150%',
+      opacity: 0,
+      duration: 0.6,
+      ease: 'power2.in',
+      stagger: 0.03,
+    }
+  );
+
+  // Trigger: .update26 top reaches 80% viewport → letters OUT, scroll back → reverse
+  const update26 = document.querySelector('.update26');
+  if (!update26) return;
+
+  ScrollTrigger.create({
+    trigger: update26,
+    start: 'top 80%',
+    onEnter: () => lettersOutTimeline.play(),
+    onLeaveBack: () => lettersOutTimeline.reverse(),
+  });
+};
+
+// Intro animation on page load
+window.introAnimation = function(e) {
+  const introBrand = e.querySelector('[intro-brand]');
+  const introSubtitle = e.querySelector('[intro-subtitle]');
+  const widelettersIntro = e.querySelectorAll('.wideletter-intro');
+
+  // Set initial states
+  gsap.set([introBrand, introSubtitle], { opacity: 0 });
+  gsap.set(widelettersIntro, { y: '-150%' });
+
+  // Prevent browser scroll restoration and force scroll to top
+  history.scrollRestoration = 'manual';
+  window.scrollTo(0, 0);
+
+  // Lock scroll: position fixed keeps scrollbar visible but prevents scrolling
+  document.body.style.position = 'fixed';
+  document.body.style.top = '0px';
+  document.body.style.width = '100%';
+
+  // Page load animation - scroll timeline is created AFTER this completes
+  const introTimeline = gsap.timeline({
+    onComplete: () => {
+      // Unlock scroll
+      document.body.style.position = '';
+      document.body.style.top = '';
+      document.body.style.width = '';
+      window.scrollTo(0, 0);
+
+      // Force all letters to final state before creating ScrollTrigger
+      gsap.set(widelettersIntro, { y: '0%', opacity: 1 });
+      gsap.set(introBrand, { opacity: 1 });
+
+      // Small delay to ensure DOM is ready, then create scroll timeline and refresh ScrollTrigger
+      requestAnimationFrame(() => {
+        createScrollTimeline();
+        ScrollTrigger.refresh();
+      });
+    }
+  });
+
+  introTimeline.to(introBrand, {
+    opacity: 1,
+    duration: 0.1,
+  });
+
+  introTimeline.to(widelettersIntro, {
+    y: '0%',
+    duration: 1,
+    ease: 'loader2',
+    stagger: 0.1,
+  });
+
+  // EXPERIMENTAL: play/reverse version (no parallax)
+  function createScrollTimeline() {
+    // Timeline 1: Letters out
+    const lettersOutTimeline = gsap.timeline({ paused: true });
+    lettersOutTimeline.to(widelettersIntro, {
+      y: '-150%',
+      opacity: 0,
+      duration: 0.6,
+      ease: 'power2.in',
+      stagger: 0.03,
+    });
+
+    // Trigger 1: Letters out (at 20% of section)
+    ScrollTrigger.create({
+      trigger: e,
+      start: 'top top-=20%',
+      onEnter: () => lettersOutTimeline.play(),
+      onLeaveBack: () => lettersOutTimeline.reverse(),
+    });
+
+    // Timeline 2: Subtitle in
+    const subtitleInTimeline = gsap.timeline({ paused: true });
+    subtitleInTimeline.fromTo(introSubtitle,
+      { y: '50%', opacity: 0 },
+      { y: '0%', opacity: 1, duration: 0.6, ease: 'power2.out' }
+    );
+
+    // Trigger 2: Subtitle in (at 90% of section)
+    ScrollTrigger.create({
+      trigger: e,
+      start: 'top top-=90%',
+      onEnter: () => subtitleInTimeline.play(),
+      onLeaveBack: () => subtitleInTimeline.reverse(),
+    });
+
+    // Timeline 3: Subtitle out
+    const subtitleOutTimeline = gsap.timeline({ paused: true });
+    subtitleOutTimeline.to(introSubtitle, {
+      opacity: 0,
+      duration: 0.5,
+      ease: 'power2.out',
+    });
+
+    // Trigger 3: Subtitle out (at 140% - well into section scroll)
+    ScrollTrigger.create({
+      trigger: e,
+      start: 'top top-=140%',
+      onEnter: () => subtitleOutTimeline.play(),
+      onLeaveBack: () => subtitleOutTimeline.reverse(),
+    });
+  }
+};
+
+// Global GSAP title animation - animates [gsap-title] elements on scroll
+function gsapTitleAnimation() {
+  const gsapTitles = document.querySelectorAll('[gsap-title]');
+
+  if (gsapTitles.length === 0) return;
+
+  gsapTitles.forEach((titleElement) => {
+    // Split text into lines
+    const splitTitle = new SplitText(titleElement, {
+      type: 'lines',
+      linesClass: 'gsap-title-line',
+    });
+
+    // Create mask wrapper for each line
+    const splitTitleMask = new SplitText(titleElement, {
+      type: 'lines',
+      linesClass: 'gsap-title-line-mask',
+    });
+
+    const lines = titleElement.querySelectorAll('.gsap-title-line');
+
+    if (lines.length === 0) return;
+
+    // Set initial state - lines hidden below
+    gsap.set(lines, { y: '100%' });
+
+    // Create paused timeline
+    const titleTimeline = gsap.timeline({ paused: true });
+
+    titleTimeline.to(lines, {
+      y: '0%',
+      duration: 0.75,
+      stagger: 0.2,
+      ease: 'loader2',
+    });
+
+    // Create ScrollTrigger with play only
+    ScrollTrigger.create({
+      trigger: titleElement,
+      start: 'top 80%',
+      animation: titleTimeline,
+      toggleActions: 'play',
+      invalidateOnRefresh: true,
+    });
+  });
+}
+
+// Global GSAP container animation - animates direct children of [gsap-container]
+function gsapContainerAnimation() {
+  const gsapContainers = document.querySelectorAll('[gsap-container]');
+
+  if (gsapContainers.length === 0) return;
+
+  gsapContainers.forEach((container) => {
+    const children = container.children;
+
+    if (children.length === 0) return;
+
+    // Set initial state
+    gsap.set(children, { y: '4rem', opacity: 0 });
+
+    // Create paused timeline
+    const containerTimeline = gsap.timeline({ paused: true });
+
+    containerTimeline.to(children, {
+      y: '0rem',
+      opacity: 1,
+      duration: 1,
+      stagger: 0.1,
+      ease: 'power3.out',
+    });
+
+    // Create ScrollTrigger with play only
+    ScrollTrigger.create({
+      trigger: container,
+      start: 'top 80%',
+      animation: containerTimeline,
+      toggleActions: 'play',
+      invalidateOnRefresh: true,
+    });
+  });
+}
+
+// Global GSAP fade animation - fades in [gsap-fade] elements on scroll
+function gsapFadeAnimation() {
+  const gsapFadeElements = document.querySelectorAll('[gsap-fade]');
+
+  if (gsapFadeElements.length === 0) return;
+
+  gsapFadeElements.forEach((element) => {
+    // Set initial state
+    gsap.set(element, { opacity: 0 });
+
+    // Create paused timeline
+    const fadeTimeline = gsap.timeline({ paused: true });
+
+    fadeTimeline.to(element, {
+      opacity: 1,
+      duration: 2,
+      ease: 'power3.out',
+    });
+
+    // Create ScrollTrigger with play only
+    ScrollTrigger.create({
+      trigger: element,
+      start: 'top 65%',
+      animation: fadeTimeline,
+      toggleActions: 'play',
+      invalidateOnRefresh: true,
+    });
+  });
+}
+
 // !!!!!!!!! Keep this Alpine init at the end !!!!!!!!!
 window.Webflow ||= [];
 window.Webflow.push(() => {
@@ -2586,6 +2906,14 @@ window.Webflow.push(() => {
   contactFormOpenAnimation();
   openContactFormFromURL();
   disableScrollMenu();
+  // 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();
 
 });