@widelab-nc/widehue 1.0.11 → 1.0.13

package/package.json

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

package/src/index.js

@@ -20,6 +20,10 @@ function customGsapEasing() {
 
 // Contact form open animation
 let contactFormOpen;
+
+
+
+
 function contactFormOpenAnimation() {
   const contactFormWrapper = document.querySelector('.contact-modal_main-wrapper');
   const contactForm = document.querySelector('.contact-modal_content-wrapper');
@@ -28,14 +32,41 @@ function contactFormOpenAnimation() {
     autoAlpha: 1,
     duration: 0.3,
     ease: 'loader2',
-  })
+  });
   contactFormOpen.from(contactForm, {
     x: '100%',
     duration: 0.4,
     ease: 'loader2',
-  }, '-=0.2')
+  }, '-=0.2');
+
+  // Nested function to handle project category clicks
+  function handleProjectCategoryClick() {
+    // Find all elements with [project-category]
+    const projectCategoryElements = document.querySelectorAll('[project-category]');
+
+    // Add click event listener to each [project-category] element
+    projectCategoryElements.forEach(projectCategoryElement => {
+      projectCategoryElement.addEventListener('click', () => {
+        const projectCategoryValue = projectCategoryElement.textContent.trim().toLowerCase(); // Convert to lowercase
+
+        // Find the matching checkbox element with data-name attribute (case insensitive)
+        const checkboxElement = document.querySelector(`.contact-modal_main-wrapper input[type="checkbox"][data-name="${projectCategoryValue}"]`);
+
+        if (checkboxElement) {
+          checkboxElement.click(); // Click on the checkbox element
+          console.log(`Clicked on checkbox for ${projectCategoryValue}`);
+        } else {
+          console.log(`No checkbox found for ${projectCategoryValue}`);
+        }
+      });
+    });
+  }
+
+  // Call the function to initialize handling of project category clicks
+  handleProjectCategoryClick();
 }
 
+
 //Smooth scroll init
 const lenis = new Lenis({
   duration: 1.2,
@@ -423,18 +454,7 @@ window.briefContact = function(e) {
 
 
 }
-
-
 window.textScroll = function(e) {
-  // Ensure GSAP and ScrollTrigger are available
-  if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') {
-    console.error('GSAP or ScrollTrigger is not available.');
-    return;
-  }
-
-  // Register ScrollTrigger plugin with GSAP
-  gsap.registerPlugin(ScrollTrigger);
-
   // Create a GSAP timeline for the reveal animation
   const revealTimeline = gsap.timeline({
     scrollTrigger: {
@@ -443,6 +463,27 @@ window.textScroll = function(e) {
     }
   });
 
+  // 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',
+  });
+
+  // Ensure .hero-line elements are created
+  const heroLines = document.querySelectorAll('.hero-line');
+  if (heroLines.length === 0) {
+    console.error('GSAP target .hero-line not found.');
+    return;
+  }
+
+  // Set initial state for hero lines and masks
+  gsap.set('.hero-line', { y: '100%' });
+  gsap.set('.hero-line-mask', { y: '100%' });
+
   // Select all .reveal-scroll elements
   const revealScrollElements = document.querySelectorAll('.reveal-scroll');
 
@@ -467,41 +508,61 @@ window.textScroll = function(e) {
     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.heroFixedSections = function(e) {
-  let panels = gsap.utils.toArray(".herofixedsection");
-  // Create a ScrollTrigger for each panel just to track when each panel's top hits the top of the viewport (only needed for snapping)
-  let tops = panels.map(panel => ScrollTrigger.create({trigger: panel, start: "top top"}));
+window.HoverMaskVideo = function(e) {
+  const hoverTitles = $(".hover-title");
+  const hoverMasks = $(".hover-mask");
+  const hoverListItems = $(".hover-list-item");
 
-  panels.forEach((panel, i) => {
-    ScrollTrigger.create({
-      trigger: panel,
-      start: () => panel.offsetHeight < window.innerHeight ? "top top" : "bottom bottom", // if it's shorter than the viewport, we prefer to pin it at the top
-      pin: true,
-      markers: false,
-      pinSpacing: false,
-      scrub: 3,
+  hoverTitles.each(function(index) {
+    const animation = gsap.fromTo(
+      hoverMasks[index],
+      { height: '0vh' }, // Start from 0vh
+      {
+        height: '73vh',  // Go to 73vh
+        ease: 'loader',
+        duration: 1.5,
+        paused: true // Animation starts in reverse
+      }
+    );
+
+    $(this).on("mouseenter", () => {
+      animation.duration(1.5).play(); // Set duration to 1.5s and play
+      const closestListItem = $(this).closest(".hover-list-item")[0];
+      if (closestListItem) {
+        closestListItem.style.zIndex = 10;
+      }
+    });
+
+    $(this).on("mouseleave", () => {
+      animation.duration(0).reverse(); // Set duration to 0s and reverse
+      const closestListItem = $(this).closest(".hover-list-item")[0];
+      if (closestListItem) {
+        closestListItem.style.zIndex = ''; // Remove inline style
+      }
     });
   });
+};
+
+
+
+
+
 
-  // Adding fade out effect for .cover-bg element
-  let coverBg = document.querySelector('.cover-bg');
 
-  if (coverBg) {
-    ScrollTrigger.create({
-      trigger: '.cover-bg',
-      start: "bottom center+=300", // Define the start point with an offset
-      end: "bottom top+=400", // Define the end point
-      scrub: true, // Smoothly scrub the animation based on the scroll position
-      onUpdate: self => {
-        gsap.to(coverBg, {opacity: self.progress, overwrite: true});
-      },
-    });
-  }
-}
 // Case study mask animation
 window.caseStudyInteraction = function(e) {
   // Video mask animation