@widelab-nc/widehue 1.0.12 → 1.0.13

package/package.json

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

package/src/index.js

@@ -521,37 +521,48 @@ window.textScroll = function(e) {
 };
 
 
-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"}));
 
-  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,
+window.HoverMaskVideo = function(e) {
+  const hoverTitles = $(".hover-title");
+  const hoverMasks = $(".hover-mask");
+  const hoverListItems = $(".hover-list-item");
+
+  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