@widelab-nc/widehue 1.0.61 → 1.0.62

package/package.json

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

package/src/index.js

@@ -767,70 +767,50 @@ window.caseCategories = function(e) {
 
 }
 
+// 3. TEXT SCROLL (SplitText) - tylko desktop
 window.textScroll = function(e) {
-  // Create a GSAP timeline for the reveal animation
-  const revealTimeline = gsap.timeline({
-    scrollTrigger: {
-      trigger: '.stats-content_wrapper',
-      start: 'top center+=200', // Start the animation when the top of the element reaches the center of the viewport
-    }
-  });
+  let mm = gsap.matchMedia();
 
-  // Initialize SplitText for the target text
-  const homeHeroHeading = new SplitText('#heroHeading', {
-    type: 'lines',
-    linesClass: 'hero-line',
-  });
-  const homeHeroHeadingMask = new SplitText('#heroHeading', {
-    type: 'lines',
-    linesClass: 'hero-line-mask',
+  mm.add(isDesktop, () => {
+    const homeHeroHeading = new SplitText('#heroHeading', { type: 'lines', linesClass: 'hero-line' });
+    const homeHeroHeadingMask = new SplitText('#heroHeading', { type: 'lines', linesClass: 'hero-line-mask' });
+    const revealScrollElements = document.querySelectorAll('.reveal-scroll');
+
+    const tl = gsap.timeline({
+      scrollTrigger: {
+        trigger: '.stats-content_wrapper',
+        start: 'top center+=200',
+      }
+    });
+
+    tl.fromTo(revealScrollElements, { y: '100%', opacity: 0 }, { y: '0%', opacity: 1, duration: 1.2, stagger: 0.2, ease: 'loader2' })
+      .fromTo('.hero-line', { y: '100%' }, { duration: 1.2, y: '0%', stagger: 0.2, ease: 'loader2' }, '<')
+      .fromTo('.hero-line-mask', { y: '100%' }, { duration: 1.2, y: '0%', stagger: 0.2, ease: 'loader2' }, '<');
   });
 
-  // Ensure .hero-line elements are created
-  const heroLines = document.querySelectorAll('.hero-line');
-  if (heroLines.length === 0) {
-    return;
-  }
+  mm.add("(max-width: 991px)", () => {
+    gsap.set(['#heroHeading', '.reveal-scroll'], { opacity: 1, y: 0 });
+  });
+};
 
-  // Set initial state for hero lines and masks
-  gsap.set('.hero-line', { y: '100%' });
-  gsap.set('.hero-line-mask', { y: '100%' });
+// 4. SPAN VIDEO MASK - tylko desktop
+window.spanVideoMaskAnimation = function(e) {
+  let mm = gsap.matchMedia();
 
-  // Select all .reveal-scroll elements
-  const revealScrollElements = document.querySelectorAll('.reveal-scroll');
+  mm.add(isDesktop, () => {
+    gsap.to(e, {
+      scrollTrigger: { trigger: e, start: 'bottom bottom-=5%' },
+      width: 0,
+      ease: 'loader2',
+      duration: 0.6,
+    });
+  });
 
-  // Add animations to the timeline with a stagger
-  revealTimeline.fromTo(revealScrollElements, {
-    y: '100%',
-    opacity: 0
-  }, {
-    y: '0%',
-    opacity: 1,
-    duration: 1.2,
-    stagger: 0.2,
-    ease: 'loader2',
+  mm.add("(max-width: 991px)", () => {
+    gsap.set(e, { width: 0 });
   });
+}
 
-  // Sync the hero-line animation with the opacity change of #heroHeading
-  revealTimeline.fromTo('.hero-line', {
-    y: '100%'
-  }, {
-    duration: 1.2,
-    y: '0%',
-    stagger: 0.2,
-    ease: 'loader2',
-  }, '<'); // Sync with the opacity change of #heroHeading
-
-  // Sync the hero-line-mask animation with the hero-line animation
-  revealTimeline.fromTo('.hero-line-mask', {
-    y: '100%'
-  }, {
-    duration: 1.2,
-    y: '0%',
-    stagger: 0.2,
-    ease: 'loader2',
-  }, '<'); // Sync with the hero-line animation
-};
 
 window.HoverMaskVideo = function(root) {
   const hoverTitles = root.querySelectorAll('.hover-title');
@@ -1560,36 +1540,29 @@ window.addEventListener('resize', function() {
 });
 
 
-
+// 5. CASE STUDY MASK (caseStudyInteraction) - tylko desktop
 window.caseStudyInteraction = function(e) {
   const mask = e.querySelector('.portfolio_item_image-mask');
+  if (!mask) return;
 
-  if (mask) {
-    console.log("Maska znaleziona dla:", e);
-    console.log("Początkowa szerokość maski:", mask.offsetWidth);
+  let mm = gsap.matchMedia();
 
-    const maskAnimation = gsap.to(mask, {
+  mm.add(isDesktop, () => {
+    gsap.to(mask, {
       scaleX: 0,
-      duration: 1.5, // Dajemy długi czas, żebyś NA PEWNO widział jeśli ruszy
+      duration: 1.5,
       ease: 'power2.out',
-      paused: true,
-      onStart: () => console.log("Animacja maski wystartowała!"),
-      onComplete: () => console.log("Animacja maski zakończona!")
-    });
-
-    ScrollTrigger.create({
-      trigger: mask,
-      start: 'top 85%',
-      markers: false, // DODAJEMY MARKERY - zobaczysz na ekranie linie start/end
-      onEnter: () => {
-        console.log("ScrollTrigger: Enter!");
-        maskAnimation.play();
+      scrollTrigger: {
+        trigger: mask,
+        start: 'top 85%'
       }
     });
-  }
-}
-
+  });
 
+  mm.add("(max-width: 991px)", () => {
+    gsap.set(mask, { scaleX: 0 });
+  });
+}
 
 let panels = gsap.utils.toArray(".panel");
 // we'll create a ScrollTrigger for each panel just to track when each panel's top hits the top of the viewport (we only need this for snapping)
@@ -2395,26 +2368,31 @@ window.whatsNext = function () {
   }
 };
 
-// Case study - images mask animation
+
 window.csMaskAnimation = function() {
-  const csImageMasks = document.querySelectorAll('.portfolio_item_image-mask');
-  csImageMasks.forEach((mask, index) => {
-    if (index === 0) {
-      return;
-    }
-    const maskAnimation = gsap.from(mask, {
-      width: '100%',
-      duration: 0.7,
-      ease: 'loader2',
-      paused: true,
-    });
-    ScrollTrigger.create({
-      animation: maskAnimation,
-      trigger: mask,
-      start: 'top 80%',
-      onEnter: () => maskAnimation.play(),
+  let mm = gsap.matchMedia();
+
+  mm.add(isDesktop, () => {
+    const csImageMasks = document.querySelectorAll('.portfolio_item_image-mask');
+    csImageMasks.forEach((mask, index) => {
+      if (index === 0) return;
+
+      gsap.from(mask, {
+        width: '100%',
+        duration: 0.7,
+        ease: 'loader2',
+        scrollTrigger: {
+          trigger: mask,
+          start: 'top 80%',
+          toggleActions: 'play none none none'
+        }
+      });
     });
   });
+
+  mm.add("(max-width: 991px)", () => {
+    gsap.set('.portfolio_item_image-mask', { width: '0%' });
+  });
 }
 
 // Update the scroll trigger on page load
@@ -2677,7 +2655,132 @@ window.heroAnimation2026 = function(e) {
 
 
 
+window.CaseHeroAnimation = function(e) {
+  const wideletters = document.querySelectorAll('.wideletter');
+  const isCshero = document.querySelector('.is-cshero');
+  const firstAfterSticky = document.querySelector('.first-after-sticky');
+
+  let mm = gsap.matchMedia();
+
+  mm.add("(min-width: 992px)", () => {
+    // --- LOGIKA TYLKO DLA DESKTOP ---
+
+    // Page load animation timeline (starts after 200ms)
+    const pageLoadTimeline = gsap.timeline({ delay: 0.2 });
+
+    // 1. .wideletter IN
+    if (wideletters.length > 0) {
+      pageLoadTimeline.fromTo(wideletters,
+        { y: '-150%', opacity: 0 },
+        { y: '0%', opacity: 1, duration: 1.2, ease: 'loader', stagger: 0.1 },
+        0
+      );
+    }
+
+    // 2. .navbar i przyciski
+    const navbar = document.querySelector('.navbar');
+    const navButtons = document.querySelectorAll('.button_small.is-navbar');
+    if (navbar || navButtons.length > 0) {
+      const navbarElements = navbar ? [navbar, ...Array.from(navButtons)] : Array.from(navButtons);
+      pageLoadTimeline.from(navbarElements, {
+        y: '-100%',
+        duration: 1.2,
+        ease: 'loader',
+        stagger: 0.15,
+      }, 0);
+    }
+
+    // 3. .hero_headline (SplitText)
+    const heroHeadline = document.querySelector('.hero_headline');
+    if (heroHeadline) {
+      new SplitText(heroHeadline, { type: 'lines', linesClass: 'gsap-title-line' });
+      new SplitText(heroHeadline, { type: 'lines', linesClass: 'gsap-title-line-mask' });
+      const heroLines = heroHeadline.querySelectorAll('.gsap-title-line');
+      if (heroLines.length > 0) {
+        gsap.set(heroLines, { y: '100%', opacity: 0 });
+        pageLoadTimeline.to(heroLines, {
+          y: '0%',
+          duration: 1,
+          opacity: 1,
+          stagger: 0.15,
+          ease: 'loader',
+        }, 0.2);
+      }
+    }
+
+    // 4. .cs-tags
+    const csTags = document.querySelector('.cs-tags');
+    if (csTags && csTags.children.length > 0) {
+      pageLoadTimeline.from(Array.from(csTags.children), {
+        y: '100%',
+        opacity: 0,
+        duration: 1.2,
+        ease: 'loader',
+        stagger: 0.15,
+      }, 0.4);
+    }
+
+    // Timelines dla scrolla (OUT / IN)
+    const lettersOutTimeline = gsap.timeline({ paused: true });
+    if (wideletters.length > 0) {
+      lettersOutTimeline.fromTo(wideletters, { y: '0%', opacity: 1 }, {
+        y: '-150%', opacity: 0, duration: 0.6, ease: 'power2.in', stagger: 0.03
+      });
+    }
+    if (isCshero) {
+      lettersOutTimeline.to(isCshero, { opacity: 0, duration: 0.6, ease: 'power2.in' }, 0);
+    }
+
+    const lettersInTimeline = gsap.timeline({ paused: true });
+    if (wideletters.length > 0) {
+      lettersInTimeline.fromTo(wideletters, { y: '-150%', opacity: 0 }, {
+        y: '0%', opacity: 1, duration: 1, ease: 'loader2', stagger: 0.1
+      });
+    }
+
+    // ScrollTrigger
+    let scrollTriggerActive = false;
+    let st;
+    if (firstAfterSticky) {
+      st = ScrollTrigger.create({
+        trigger: firstAfterSticky,
+        start: 'top 80%',
+        end: 'top top',
+        onEnter: () => { scrollTriggerActive = true; lettersOutTimeline.play(); },
+        onLeaveBack: () => { scrollTriggerActive = false; lettersOutTimeline.reverse(); }
+      });
+    }
 
+    // Global scroll listener (zabezpieczony)
+    let lastScrollY = window.scrollY;
+    let pageLoadComplete = false;
+    pageLoadTimeline.eventCallback('onComplete', () => { pageLoadComplete = true; });
+
+    const handleScroll = () => {
+      if (!pageLoadComplete || scrollTriggerActive) return;
+      const currentScrollY = window.scrollY;
+      if (currentScrollY < lastScrollY && wideletters.length > 0) {
+        lettersInTimeline.play();
+      }
+      lastScrollY = currentScrollY;
+    };
+
+    window.addEventListener('scroll', handleScroll);
+
+    // CLEANUP - sprzątanie przy zmianie na Mobile
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+      if (st) st.kill();
+      gsap.set([wideletters, isCshero, '.navbar', '.button_small.is-navbar', '.gsap-title-line', '.cs-tags > *'], { clearProps: "all" });
+    };
+  });
+
+  // --- REAKCJA DLA MOBILE (< 992px) ---
+  if (window.innerWidth < 992) {
+    // Wymuszamy widoczność, żeby uniknąć initial state (opacity 0) na iPhone
+    gsap.set([wideletters, isCshero, '.hero_headline', '.cs-tags > *'], { opacity: 1, y: '0%', visibility: 'visible' });
+  }
+};
 
 
 
@@ -2787,16 +2890,17 @@ window.introAnimation = function(e) {
   }
 };
 
-
-
+const isDesktop = "(min-width: 992px)";
 
 function gsapTitleAnimation() {
-  if (!window.isPageUnlocked) return; // Jeśli strona zablokowana, nie rób nic
+  if (window.innerWidth < 992) return; // BRUTALNE CIĘCIE #1
 
   const gsapTitles = document.querySelectorAll('[gsap-title]');
   gsapTitles.forEach((titleElement) => {
-    new SplitText(titleElement, { type: 'lines', linesClass: 'gsap-title-line' });
+    // Inicjalizacja SplitText tylko na desktopie
+    const split = new SplitText(titleElement, { type: 'lines', linesClass: 'gsap-title-line' });
     new SplitText(titleElement, { type: 'lines', linesClass: 'gsap-title-line-mask' });
+
     const lines = titleElement.querySelectorAll('.gsap-title-line');
     if (lines.length === 0) return;
 
@@ -2806,15 +2910,14 @@ function gsapTitleAnimation() {
       scrollTrigger: {
         trigger: titleElement,
         start: 'top 90%',
-        toggleActions: 'play none none none',
-        fastScrollEnd: true
+        toggleActions: 'play none none none'
       }
     });
   });
 }
 
 function gsapContainerAnimation() {
-  if (!window.isPageUnlocked) return;
+  if (window.innerWidth < 992) return; // BRUTALNE CIĘCIE #2
 
   const gsapContainers = document.querySelectorAll('[gsap-container]');
   gsapContainers.forEach((container) => {
@@ -2827,15 +2930,17 @@ function gsapContainerAnimation() {
       scrollTrigger: {
         trigger: container,
         start: 'top 90%',
-        toggleActions: 'play none none none',
-        fastScrollEnd: true
+        toggleActions: 'play none none none'
       }
     });
   });
 }
 
+
+
+
 function gsapFadeAnimation() {
-  if (!window.isPageUnlocked) return;
+  if (window.innerWidth < 992) return; // BRUTALNE CIĘCIE #3
 
   const gsapFadeElements = document.querySelectorAll('[gsap-fade]');
   gsapFadeElements.forEach((element) => {
@@ -2845,8 +2950,7 @@ function gsapFadeAnimation() {
       scrollTrigger: {
         trigger: element,
         start: 'top 85%',
-        toggleActions: 'play none none none',
-        fastScrollEnd: true
+        toggleActions: 'play none none none'
       }
     });
   });
@@ -2858,7 +2962,6 @@ function gsapFadeAnimation() {
 
 
 
-
 // !!!!!!!!! Keep this Alpine init at the end !!!!!!!!!
 window.Webflow ||= [];
 window.Webflow.push(() => {