@widelab-nc/widehue 1.0.43 → 1.0.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widelab-nc/widehue",
-  "version": "1.0.43",
+  "version": "1.0.44",
   "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,7 +1478,6 @@ window.animationTest4 = function(root) {
 
 
 
-
 window.pricingInteraction = function(e) {
   // Check if the screen width is 992px or wider
   if (window.innerWidth >= 992) {
@@ -1993,6 +1978,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);