@widelab-nc/widehue 1.0.48 → 1.0.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widelab-nc/widehue",
-  "version": "1.0.48",
+  "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');
@@ -2716,6 +2714,7 @@ window.CaseHeroAnimation = function(e) {
       pageLoadTimeline.to(heroLines, {
         y: '0%',
         duration: 1.2,
+        opacity: 1,
         stagger: 0.2,
         ease: 'loader',
       }, 0.2);
@@ -2946,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',
     });