@widelab-nc/widehue 1.0.43 → 1.0.45

package/package.json

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

package/src/index.js

@@ -24,6 +24,7 @@ function customGsapEasing() {
 // Contact form open animation
 let contactFormOpen;
 
+
 function refreshScrollTriggersAfterLoad() {
   window.addEventListener('load', () => {
     console.log('[ScrollTrigger] Page fully loaded — refreshing all triggers');
@@ -489,16 +490,12 @@ window.customCursorText = function(e) {
   });
 }
 
+
+
 window.heroAnimationOnLoad = function(e) {
   console.log('heroAnimationOnLoad function started');
 
-  let hasPlayedAnimation = sessionStorage.getItem('hasPlayedHeroAnimation');
-
-  if (performance.navigation.type === 1) {
-    sessionStorage.removeItem('hasPlayedHeroAnimation');
-    hasPlayedAnimation = null;
-    console.log('Page reloaded; session flag cleared.');
-  }
+  const hasPlayedAnimation = window.name.includes('heroPlayed');
 
   gsap.set('.wideletter', { y: '-150%', scale: 1 });
 
@@ -530,7 +527,6 @@ window.heroAnimationOnLoad = function(e) {
     return;
   }
 
-  // Handle video source replacement based on viewport width
   function updateVideoSources() {
     const isMobile = window.innerWidth < 992;
     const mobileMp4 = video.getAttribute('mobile-mp4');
@@ -539,31 +535,22 @@ window.heroAnimationOnLoad = function(e) {
     const webmSource = video.querySelector('source[type="video/webm"]');
 
     if (isMobile) {
-      if (mobileMp4) {
-        mp4Source.setAttribute('data-src', mobileMp4);
-      }
-      if (mobileWebm) {
-        webmSource.setAttribute('data-src', mobileWebm);
-      }
+      if (mobileMp4) mp4Source.setAttribute('data-src', mobileMp4);
+      if (mobileWebm) 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();
       }
     });
   }
@@ -577,7 +564,6 @@ window.heroAnimationOnLoad = function(e) {
 
     heroAnimation.to('.navbar_brand_lottie', {
       duration: 1.5,
-      // Usuń progress: 1 całkowicie
       onComplete: function() {
         console.log('Lottie animation completed');
         gsap.to('.navbar_brand_lottie', { opacity: 0, duration: 0.25 });
@@ -605,7 +591,7 @@ window.heroAnimationOnLoad = function(e) {
       ease: 'loader2',
     }, '+=1');
 
-    sessionStorage.setItem('hasPlayedHeroAnimation', 'true');
+    window.name += 'heroPlayed;';
   } else {
     console.log('Skipping initial hero line animations as they have already been played in this session');
   }
@@ -635,7 +621,11 @@ window.heroAnimationOnLoad = function(e) {
   }, '>-0.4');
 
   console.log('Animation timeline setup completed');
-}
+};
+
+
+
+
 
 
 window.briefContact = function(e) {
@@ -1358,18 +1348,15 @@ window.animationTest3 = function(root) {
   });
 };
 
-
 window.animationTest4 = function(root) {
   const hoverWrappers = root.querySelectorAll('.h-wrapper');
   const hoverMasks = root.querySelectorAll('.hover-mask');
   const hoverTitles = root.querySelectorAll('.h-title');
 
-  // Stałe rozmiary bg-video
   const VIDEO_WIDTH = 380;
   const VIDEO_HEIGHT = 280;
   const VISIBLE_RATIO = 0.7;
 
-  // Ukryj wszystkie maski na starcie
   hoverMasks.forEach(mask => {
     mask.style.display = 'none';
     mask.style.position = 'fixed';
@@ -1378,7 +1365,7 @@ window.animationTest4 = function(root) {
     mask.style.width = '100vw';
     mask.style.height = '100vh';
     mask.style.zIndex = '999';
-    mask.style.pointerEvents = 'none'; // nie blokuje hovera
+    mask.style.pointerEvents = 'none';
   });
 
   function resetOpacity() {
@@ -1394,6 +1381,7 @@ window.animationTest4 = function(root) {
       video.style.left = '';
       video.style.top = '';
       video.style.position = '';
+      video.style.zIndex = '';
     });
   }
 
@@ -1418,7 +1406,6 @@ window.animationTest4 = function(root) {
     el.style.position = 'absolute';
     el.style.width = `${VIDEO_WIDTH}px`;
     el.style.height = `${VIDEO_HEIGHT}px`;
-    el.style.zIndex = '1001';
     el.style.pointerEvents = 'none';
   }
 
@@ -1434,7 +1421,6 @@ window.animationTest4 = function(root) {
       video.style.width = `${VIDEO_WIDTH}px`;
       video.style.height = `${VIDEO_HEIGHT}px`;
       video.style.position = 'absolute';
-      video.style.zIndex = '1001';
       video.style.pointerEvents = 'none';
     });
 
@@ -1451,8 +1437,7 @@ window.animationTest4 = function(root) {
 
       videoTimeline = gsap.timeline();
 
-      // Stwórz tablicę indeksów i wymieszaj ją
-      const videoIndexes = Array.from({length: videos.length}, (_, i) => i);
+      const videoIndexes = Array.from({ length: videos.length }, (_, i) => i);
       const shuffledIndexes = videoIndexes.sort(() => Math.random() - 0.5);
 
       shuffledIndexes.forEach((videoIndex, timeIndex) => {
@@ -1460,6 +1445,7 @@ window.animationTest4 = function(root) {
 
         videoTimeline.add(() => {
           placeElementAtRandomVisiblePosition(video, mask);
+          video.style.zIndex = 1001 + timeIndex; // <-- z-index rośnie
         }, timeIndex * 0.75);
 
         videoTimeline.to(video, {
@@ -1492,18 +1478,51 @@ 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');
+
+    console.log('[pricingInteraction] .tabs-content found:', tabsContent);
+    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
-    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",
+
     });
+
+    console.log('[pricingInteraction] ScrollTrigger created:', trigger);
+  } else {
+    console.log('[pricingInteraction] Mobile mode - skipping pin');
   }
 };
 
@@ -1993,6 +2012,42 @@ window.clientLogosAnimation = function(e) {
   });
 }
 
+// Hue Awards animation with individual ScrollTriggers
+window.hueAwardsAnimation = function(e) {
+  const logoItems = e.querySelectorAll('.clients_collection_item_mask.is-3');
+
+  logoItems.forEach((maskEl) => {
+    const imgEl = maskEl.querySelector('.skills-item_img');
+
+    // Set initial height of mask to 100%
+    gsap.set(maskEl, { height: '100%' });
+
+    // Animate mask height to 0% when it enters viewport
+    gsap.to(maskEl, {
+      scrollTrigger: {
+        trigger: maskEl,
+        start: 'top bottom-=25%',
+      },
+      height: '0%',
+      duration: 0.7,
+      ease: 'loader2',
+    });
+
+    // Animate logo opacity (fade in)
+    gsap.from(imgEl, {
+      scrollTrigger: {
+        trigger: maskEl,
+        start: 'top bottom-=25%',
+      },
+      opacity: 0,
+      delay: 0.4,
+      duration: 0.45,
+      ease: 'loader2',
+    });
+  });
+};
+
+
 // Hero span video on hover
 window.heroSpanVideoOnHover = function(e) {
   window.customCursorText(e);
@@ -2506,6 +2561,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
@@ -2542,6 +2633,283 @@ 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;
+
+  // Wideletters animation timeline (paused)
+  const widelettersTimeline = gsap.timeline({ paused: true });
+  widelettersTimeline.fromTo(wideletters,
+    { y: '-150%' },
+    {
+      y: '0%',
+      duration: 0.8,
+      ease: 'power2.out',
+      stagger: 0.05,
+    }
+  );
+
+  // 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
+  );
+
+  // 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,
+    start: 'top 80%',
+    onEnter: () => partnerTimeline.play(),
+    onLeaveBack: () => partnerTimeline.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/reverse
+    ScrollTrigger.create({
+      trigger: titleElement,
+      start: 'top 80%',
+      onEnter: () => titleTimeline.play(),
+      onLeaveBack: () => titleTimeline.reverse(),
+    });
+  });
+}
+
+// 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/reverse
+    ScrollTrigger.create({
+      trigger: container,
+      start: 'top 80%',
+      onEnter: () => containerTimeline.play(),
+      onLeaveBack: () => containerTimeline.reverse(),
+    });
+  });
+}
+
+// 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/reverse
+    ScrollTrigger.create({
+      trigger: element,
+      start: 'top 65%',
+      onEnter: () => fadeTimeline.play(),
+      onLeaveBack: () => fadeTimeline.reverse(),
+    });
+  });
+}
+
 // !!!!!!!!! Keep this Alpine init at the end !!!!!!!!!
 window.Webflow ||= [];
 window.Webflow.push(() => {
@@ -2565,6 +2933,9 @@ window.Webflow.push(() => {
   contactFormOpenAnimation();
   openContactFormFromURL();
   disableScrollMenu();
+  gsapTitleAnimation();
+  gsapContainerAnimation();
+  gsapFadeAnimation();
   refreshScrollTriggersAfterLoad();
 
 });