@widelab-nc/widelab 1.1.40 → 1.1.42

package/package.json

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

package/src/index.js

@@ -448,7 +448,42 @@ if (infoBar) {
     });
   }
 
+let articleModalOpen;
+function articleModalOpenAnimation() {
+  const articleModalWrapper = document.querySelector('.article-modal_main-wrapper');
+  const articleModalContent = document.querySelector('.article-modal_content-wrapper');
+  articleModalOpen = gsap.timeline({paused: true});
+  articleModalOpen.to(articleModalWrapper, {
+    autoAlpha: 1,
+    duration: 0.3,
+    ease: 'loader2',
+  })
+  articleModalOpen.from(articleModalContent, {
+    x: '100%',
+    duration: 0.4,
+    ease: 'loader2',
+  }, '-=0.2')
+}
+
+window.openArticleModal = function() {
+  articleModalOpen.play();
+  document.body.classList.add('is-scroll-off');
+  lenis.stop();
+}
 
+window.closeArticleModal = function() {
+  articleModalOpen.timeScale(1).reverse();
+  document.body.classList.remove('is-scroll-off');
+  lenis.start();
+}
+
+window.closeArticleModalOnEsc = function(e) {
+  document.addEventListener('keydown', function(event) {
+    if (event.key === "Escape") {
+      window.closeArticleModal();
+    }
+  });
+}
 
 // Safe new version that uses the same classes and structure
 window.customCursorTextUpdate = function(el) {
@@ -478,59 +513,175 @@ window.customCursorTextUpdate = function(el) {
   el.addEventListener('pointerleave', maybeDeactivate);
 };
 
+window.stickyServices = function (e) {
+  var wrapper = e;
+  if (!wrapper || wrapper.dataset.stickyServicesInit === 'true') return;
+  wrapper.dataset.stickyServicesInit = 'true';
 
+  var navItems = wrapper.querySelectorAll('.services_item-wrapper.is-animated');
+  var stackItems = wrapper.querySelectorAll('.services-stack-img');
 
+  var count = Math.min(navItems.length, stackItems.length);
+  if (count === 0) return;
 
-  // Hero animation on load
-  window.heroAnimationOnLoad = function(e) {
-    const videoMask = e.querySelector('.hero_headline_ract-mask');
-    const heroAnimation = gsap.timeline({}),
-      homeHeroHeading = new SplitText('#heroHeading', {
-        type: 'lines',
-        linesClass: 'hero-line',
-      }),
-      homeHeroHeadingMask = new SplitText('#heroHeading', {
-        type: 'lines',
-        linesClass: 'hero-line-mask',
-      });
-    heroAnimation.from('.navbar', {
-      opacity: 0,
-      duration: 0.6,
+  var currentActive = -1;
+  var ticking = false;
+
+  function setActive(index) {
+    if (index === currentActive) return;
+    currentActive = index;
+
+    for (var i = 0; i < navItems.length; i++) {
+      navItems[i].classList.toggle('is-active', i === index);
+    }
+    for (var j = 0; j < stackItems.length; j++) {
+      stackItems[j].classList.toggle('is-active', j === index);
+    }
+  }
+
+  function update() {
+    ticking = false;
+
+    var rect = wrapper.getBoundingClientRect();
+    var total = wrapper.offsetHeight - window.innerHeight;
+
+    // Wrapper not tall enough to scroll through (e.g. very tall viewport) — keep first item active.
+    if (total <= 0) {
+      setActive(0);
+      return;
+    }
+
+    var scrolled = -rect.top;
+    var progress = Math.min(1, Math.max(0, scrolled / total));
+    var activeIndex = Math.min(count - 1, Math.floor(progress * count));
+
+    setActive(activeIndex);
+  }
+
+  function onScrollOrResize() {
+    if (!ticking) {
+      requestAnimationFrame(update);
+      ticking = true;
+    }
+  }
+
+  window.addEventListener('scroll', onScrollOrResize, { passive: true });
+  window.addEventListener('resize', onScrollOrResize);
+
+  update(); // set correct state immediately on load (handles page-load mid-scroll / refresh position)
+};
+
+
+window.heroAnimationOnLoad = function(e) {
+  const videoMask = e.querySelector('.hero_headline_ract-mask');
+  const heroAnimation = gsap.timeline({}),
+    homeHeroHeading = new SplitText('#heroHeading', {
+      type: 'lines',
+      linesClass: 'hero-line',
+    }),
+    homeHeroHeadingMask = new SplitText('#heroHeading', {
+      type: 'lines',
+      linesClass: 'hero-line-mask',
+    });
+
+  heroAnimation.from('.navbar', {
+    opacity: 0,
+    duration: 0.6,
+    ease: 'loader2',
+  }, '>+0.4');
+
+  heroAnimation.from(
+    '.hero-line',
+    {
+      duration: 1.2,
+      y: '100%',
+      stagger: 0.2,
       ease: 'loader2',
     },
-      '>+0.4');
-    heroAnimation.from(
-      '.hero-line',
-      {
-        duration: 1.2,
-        y: '100%',
-        stagger: 0.2,
-        ease: 'loader2',
-      },
-      '>-0.5'
-    );
-    if (videoMask) {
-      heroAnimation.to(
-        '.hero_headline_ract-mask',
-        {
-          width: '0%',
-          duration: 0.6,
-          ease: 'loader2',
-        },
-        '>-0.6'
-      );
-    }
-    heroAnimation.from(
-      '#heroBottomWrapper',
+    '>-0.5'
+  );
+
+  if (videoMask) {
+    heroAnimation.to(
+      '.hero_headline_ract-mask',
       {
-        opacity: 0,
-        duration: 1,
+        width: '0%',
+        duration: 0.6,
         ease: 'loader2',
       },
-      '>-0.4'
+      '>-0.6'
     );
   }
 
+  heroAnimation.from(
+    '#heroBottomWrapper',
+    {
+      opacity: 0,
+      duration: 1,
+      ease: 'loader2',
+    },
+    '>-0.4'
+  );
+
+  heroAnimation.call(() => {
+    const rotateEl = e.querySelector('[rotate-text]');
+    if (!rotateEl) return;
+
+    const attrValue = rotateEl.getAttribute('rotate-text') || '';
+    const extraPhrases = attrValue
+      .split(',')
+      .map(s => s.trim())
+      .filter(Boolean);
+
+    const defaultText = rotateEl.textContent.trim();
+    const phrases = [defaultText, ...extraPhrases];
+
+    if (phrases.length < 2) return;
+
+    rotateEl.style.display = 'inline-block';
+    rotateEl.style.overflow = 'hidden';
+    rotateEl.style.verticalAlign = 'bottom';
+    rotateEl.style.position = 'relative';
+
+    let currentSpan = document.createElement('span');
+    currentSpan.style.display = 'inline-block';
+    currentSpan.textContent = phrases[0];
+    rotateEl.textContent = '';
+    rotateEl.appendChild(currentSpan);
+
+    let current = 0;
+    const DURATION = 1.2;
+    const EASE = 'loader2';
+    const PAUSE = 2200;
+
+    function rotateTo(nextIndex) {
+      const incoming = document.createElement('span');
+      incoming.style.cssText = 'display:inline-block; position:absolute; left:0; top:0; white-space:nowrap;';
+      incoming.textContent = phrases[nextIndex];
+      rotateEl.appendChild(incoming);
+
+      const outgoing = currentSpan;
+
+      const tl = gsap.timeline({
+        onComplete: () => {
+          rotateEl.removeChild(outgoing);
+          incoming.style.position = 'static';
+          currentSpan = incoming;
+          current = nextIndex;
+          setTimeout(() => rotateTo((current + 1) % phrases.length), PAUSE);
+        }
+      });
+
+      tl.to(outgoing, { y: '-100%', duration: DURATION, ease: EASE }, 0);
+      tl.fromTo(incoming, { y: '100%' }, { y: '0%', duration: DURATION, ease: EASE }, 0);
+    }
+
+    setTimeout(() => rotateTo(1), PAUSE);
+  });
+};
+
+
+
 
 // Case study mask animation + pill fade-in (full, iOS-safe, L->R reveal)
 window.caseStudyInteraction = function (e) {
@@ -2156,6 +2307,59 @@ window.contactUsHide = function(e) {
   }));
 }
 
+
+
+window.expandablePadSticky = function (e) {
+  var wrapper = e;
+  if (!wrapper || wrapper.dataset.expandablePadStickyInit === 'true') return;
+  wrapper.dataset.expandablePadStickyInit = 'true';
+
+  var items = wrapper.querySelectorAll('.service_expanded');
+  var count = items.length;
+  if (count === 0) return;
+
+  var currentActive = -1;
+  var ticking = false;
+
+  function setActive(index) {
+    if (index === currentActive) return;
+    currentActive = index;
+    for (var i = 0; i < items.length; i++) {
+      var isTarget = i === index;
+      items[i].classList.toggle('is-active', isTarget);
+      items[i].style.height = isTarget ? items[i].scrollHeight + 'px' : '0px';
+    }
+  }
+
+  function update() {
+    ticking = false;
+    var rect = wrapper.getBoundingClientRect();
+    var total = wrapper.offsetHeight - window.innerHeight;
+    if (total <= 0) { setActive(0); return; }
+    var scrolled = -rect.top;
+    var progress = Math.min(1, Math.max(0, scrolled / total));
+    var activeIndex = Math.min(count - 1, Math.floor(progress * (count + 1)));
+    setActive(activeIndex);
+  }
+
+  function onScrollOrResize() {
+    if (!ticking) { requestAnimationFrame(update); ticking = true; }
+  }
+
+  function onResize() {
+    onScrollOrResize();
+    if (currentActive !== -1) {
+      items[currentActive].style.height = items[currentActive].scrollHeight + 'px';
+    }
+  }
+
+  window.addEventListener('scroll', onScrollOrResize, { passive: true });
+  window.addEventListener('resize', onResize);
+  update();
+};
+
+
+
 // Refresh Gsap scrollTriggers
 window.scrollTriggerRefresh = function() {
   function refreshScrollTrigger() {
@@ -2207,7 +2411,6 @@ window.closeInfoBar = function() {
       lenis.destroy();
     }
     customGsapEasing();
-
     reloadOnBack();
     revealFooter();
     pageLoadAnimation();
@@ -2217,4 +2420,5 @@ window.closeInfoBar = function() {
     disableScrollMenu();
     scrollToHashOnLoad();
     initClientLogosAnimation();
-  });
+    articleModalOpenAnimation();
+  });