@widelab-nc/widehue 1.0.47 → 1.0.49

package/package.json

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

package/src/index.js

@@ -469,9 +469,6 @@ window.customCursorText = function(e) {
     customCursorTextElement.innerHTML = wideCursorTextValue;
   });
 }
-
-
-
 window.heroAnimationOnLoad = function(e) {
   const video = document.getElementById('herovideo');
 
@@ -482,39 +479,47 @@ window.heroAnimationOnLoad = function(e) {
   }
 
   let videoPlayListener = null;
+
   if (video) {
+    const isMobile = window.innerWidth < 992;
+
+    const mp4Source = video.querySelector('source[type="video/mp4"]');
+    const webmSource = video.querySelector('source[type="video/webm"]');
+
+    const desktopMp4 = mp4Source?.getAttribute('data-desktop') || mp4Source?.getAttribute('src');
+    const desktopWebm = webmSource?.getAttribute('data-desktop') || webmSource?.getAttribute('src');
+
+    const mobileMp4 = video.getAttribute('mobile-mp4');
+    const mobileWebm = video.getAttribute('mobile-webm');
+
+    if (isMobile && mobileMp4 && mobileWebm) {
+      if (mp4Source) mp4Source.src = mobileMp4;
+      if (webmSource) webmSource.src = mobileWebm;
+    } else {
+      if (mp4Source && desktopMp4) mp4Source.src = desktopMp4;
+      if (webmSource && desktopWebm) webmSource.src = desktopWebm;
+    }
+
+    video.load();
     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 {
   }
 
   function run() {
@@ -542,9 +547,6 @@ window.heroAnimationOnLoad = function(e) {
       document.addEventListener('touchmove', preventScroll, { passive: false });
     }
 
-    // Lock scroll IMMEDIATELY at the start - before any animation
-    lockScroll();
-
     function unlockScroll() {
       document.body.style.position = '';
       document.body.style.top = '';
@@ -559,6 +561,8 @@ window.heroAnimationOnLoad = function(e) {
       if (typeof lenis !== 'undefined' && lenis.start) lenis.start();
     }
 
+    lockScroll();
+
     const heroAnimation = gsap.timeline({});
 
     if (preloader && introBrand && introSubtitle && widelettersIntro.length > 0) {
@@ -572,9 +576,7 @@ window.heroAnimationOnLoad = function(e) {
       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',
@@ -583,25 +585,13 @@ window.heroAnimationOnLoad = function(e) {
         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 => {
-            });
+            if (videoPlayListener) video.removeEventListener('play', videoPlayListener);
+            video.play().catch(() => {});
           }
         },
-        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',
@@ -611,31 +601,41 @@ window.heroAnimationOnLoad = function(e) {
           if (video) {
             video.currentTime = 0;
             video.removeAttribute('data-no-autoplay');
-            if (videoPlayListener) {
-              video.removeEventListener('play', videoPlayListener);
-            }
+            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.from('#heroBottomWrapper', { opacity: 0, duration: 1, ease: 'loader2' }, '>-0.4');
 
-    // Literki IN as last step in timeline (initial state)
     const wideletters = document.querySelectorAll('.wideletter');
     if (wideletters.length > 0) {
+      // teraz scroll odblokowuje się dopiero po animacji wszystkich liter
       heroAnimation.fromTo(wideletters,
         { y: '-150%', opacity: 0 },
-        { y: '0%', opacity: 1, duration: 1, ease: 'loader2', stagger: 0.1 },
+        {
+          y: '0%',
+          opacity: 1,
+          duration: 1,
+          ease: 'loader2',
+          stagger: 0.1,
+          onComplete: () => {
+            unlockScroll();
+            gsap.set(wrapIt, { visibility: 'hidden', pointerEvents: 'none' });
+            ScrollTrigger.refresh();
+          }
+        },
         '>-0.6'
       );
+    } else {
+      // jeśli nie ma liter, odblokuj scroll po animacji wrapIt
+      heroAnimation.add(() => {
+        unlockScroll();
+        gsap.set(wrapIt, { visibility: 'hidden', pointerEvents: 'none' });
+        ScrollTrigger.refresh();
+      });
     }
   }
 
@@ -649,8 +649,6 @@ window.heroAnimationOnLoad = function(e) {
 
 
 
-
-
 window.briefContact = function(e) {
   const button = document.querySelector('.brief-button');
   const bottomOverlay = document.querySelector('#bottomWrapperOverlay');
@@ -2667,11 +2665,24 @@ window.heroAnimation2026 = function(e) {
 
 // Case Hero Animation - navbar letters on scroll
 window.CaseHeroAnimation = function(e) {
+  // Scroll animation for wideletters
+  const wideletters = document.querySelectorAll('.wideletter');
+  const isCshero = document.querySelector('.is-cshero');
+
   // Page load animation timeline (starts after 200ms)
   const pageLoadTimeline = gsap.timeline({ delay: 0.2 });
 
-  // All animations start at the same time with 0.2s stagger between them
-  // 1. .navbar and .button_small.is-navbar - slide down from top with stagger
+  // 1. .wideletter IN as FIRST animation in page load timeline
+  if (wideletters.length > 0) {
+    pageLoadTimeline.fromTo(wideletters,
+      { y: '-150%', opacity: 0 },
+      { y: '0%', opacity: 1, duration: 1.2, ease: 'loader', stagger: 0.1 },
+      0
+    );
+  }
+
+  // All other animations start at the same time with 0.2s stagger between them
+  // 2. .navbar and .button_small.is-navbar - slide down from top with stagger
   const navbar = document.querySelector('.navbar');
   const navButtons = document.querySelectorAll('.button_small.is-navbar');
   if (navbar || navButtons.length > 0) {
@@ -2684,7 +2695,7 @@ window.CaseHeroAnimation = function(e) {
     }, 0);
   }
 
-  // 2. .hero_headline - SplitText animation (like gsapTitleAnimation but play in timeline)
+  // 3. .hero_headline - SplitText animation (like gsapTitleAnimation but play in timeline)
   const heroHeadline = document.querySelector('.hero_headline');
   let heroLines = [];
   if (heroHeadline) {
@@ -2703,13 +2714,14 @@ window.CaseHeroAnimation = function(e) {
       pageLoadTimeline.to(heroLines, {
         y: '0%',
         duration: 1.2,
+        opacity: 1,
         stagger: 0.2,
         ease: 'loader',
       }, 0.2);
     }
   }
 
-  // 3. Direct children of .cs-tags - slide down from bottom with opacity, stagger
+  // 4. Direct children of .cs-tags - slide down from bottom with opacity, stagger
   const csTags = document.querySelector('.cs-tags');
   if (csTags && csTags.children.length > 0) {
     pageLoadTimeline.from(Array.from(csTags.children), {
@@ -2721,10 +2733,6 @@ window.CaseHeroAnimation = function(e) {
     }, 0.4);
   }
 
-  // Scroll animation for wideletters
-  const wideletters = document.querySelectorAll('.wideletter');
-  const isCshero = document.querySelector('.is-cshero');
-
   if (wideletters.length === 0 && !isCshero) return;
 
   // Timeline for letters OUT
@@ -2742,7 +2750,22 @@ window.CaseHeroAnimation = function(e) {
     );
   }
 
-  // Fade out .is-cshero on same timeline
+  // Timeline for letters IN (for scroll up)
+  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,
+      }
+    );
+  }
+
+  // Fade out .is-cshero on same timeline as letters OUT
   if (isCshero) {
     lettersOutTimeline.to(isCshero,
       {
@@ -2759,12 +2782,37 @@ window.CaseHeroAnimation = function(e) {
   const firstAfterSticky = document.querySelector('.first-after-sticky');
   if (!firstAfterSticky) return;
 
+  let scrollTriggerActive = false;
+
   ScrollTrigger.create({
     trigger: firstAfterSticky,
     start: 'top 80%',
     end: 'top top',
-    onEnter: () => lettersOutTimeline.play(),
-    onLeaveBack: () => lettersOutTimeline.reverse(),
+    onEnter: () => {
+      scrollTriggerActive = true;
+      lettersOutTimeline.play();
+    },
+    onLeaveBack: () => {
+      scrollTriggerActive = false;
+      lettersOutTimeline.reverse();
+    },
+  });
+
+  // Listen for scroll up globally to show letters IN (but not during page load or when ScrollTrigger is handling it)
+  let lastScrollY = window.scrollY;
+  let pageLoadComplete = false;
+  pageLoadTimeline.eventCallback('onComplete', () => {
+    pageLoadComplete = true;
+  });
+
+  window.addEventListener('scroll', () => {
+    if (!pageLoadComplete || scrollTriggerActive) return;
+    const currentScrollY = window.scrollY;
+    if (currentScrollY < lastScrollY && wideletters.length > 0) {
+      // Scroll up - show letters IN (only when ScrollTrigger is not active)
+      lettersInTimeline.play();
+    }
+    lastScrollY = currentScrollY;
   });
 };
 
@@ -2897,15 +2945,16 @@ function gsapTitleAnimation() {
     if (lines.length === 0) return;
 
     // Set initial state - lines hidden below
-    gsap.set(lines, { y: '100%' });
+    gsap.set(lines, { y: '1.25rem', opacity: 0 });
 
     // Create paused timeline
     const titleTimeline = gsap.timeline({ paused: true });
 
     titleTimeline.to(lines, {
-      y: '0%',
+      y: '0rem',
+      opacity: 1,
       duration: 0.75,
-      stagger: 0.2,
+      stagger: 0.15,
       ease: 'loader2',
     });