@widelab-nc/widehue 1.0.46 → 1.0.47

package/package.json

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

package/src/index.js

@@ -2665,6 +2665,109 @@ window.heroAnimation2026 = function(e) {
   });
 };
 
+// Case Hero Animation - navbar letters on scroll
+window.CaseHeroAnimation = function(e) {
+  // Page load animation timeline (starts after 200ms)
+  const pageLoadTimeline = gsap.timeline({ delay: 0.2 });
+
+  // All animations start at the same time with 0.2s stagger between them
+  // 1. .navbar and .button_small.is-navbar - slide down from top with stagger
+  const navbar = document.querySelector('.navbar');
+  const navButtons = document.querySelectorAll('.button_small.is-navbar');
+  if (navbar || navButtons.length > 0) {
+    const navbarElements = navbar ? [navbar, ...Array.from(navButtons)] : Array.from(navButtons);
+    pageLoadTimeline.from(navbarElements, {
+      y: '-100%',
+      duration: 1.2,
+      ease: 'loader',
+      stagger: 0.15,
+    }, 0);
+  }
+
+  // 2. .hero_headline - SplitText animation (like gsapTitleAnimation but play in timeline)
+  const heroHeadline = document.querySelector('.hero_headline');
+  let heroLines = [];
+  if (heroHeadline) {
+    const splitTitle = new SplitText(heroHeadline, {
+      type: 'lines',
+      linesClass: 'gsap-title-line',
+    });
+    // Create mask wrapper for each line (like gsapTitleAnimation)
+    const splitTitleMask = new SplitText(heroHeadline, {
+      type: 'lines',
+      linesClass: 'gsap-title-line-mask',
+    });
+    heroLines = heroHeadline.querySelectorAll('.gsap-title-line');
+    if (heroLines.length > 0) {
+      gsap.set(heroLines, { y: '100%' });
+      pageLoadTimeline.to(heroLines, {
+        y: '0%',
+        duration: 1.2,
+        stagger: 0.2,
+        ease: 'loader',
+      }, 0.2);
+    }
+  }
+
+  // 3. Direct children of .cs-tags - slide down from bottom with opacity, stagger
+  const csTags = document.querySelector('.cs-tags');
+  if (csTags && csTags.children.length > 0) {
+    pageLoadTimeline.from(Array.from(csTags.children), {
+      y: '100%',
+      opacity: 0,
+      duration: 1.2,
+      ease: 'loader',
+      stagger: 0.15,
+    }, 0.4);
+  }
+
+  // Scroll animation for wideletters
+  const wideletters = document.querySelectorAll('.wideletter');
+  const isCshero = document.querySelector('.is-cshero');
+
+  if (wideletters.length === 0 && !isCshero) return;
+
+  // Timeline for letters OUT
+  const lettersOutTimeline = gsap.timeline({ paused: true });
+  if (wideletters.length > 0) {
+    lettersOutTimeline.fromTo(wideletters,
+      { y: '0%', opacity: 1 },
+      {
+        y: '-150%',
+        opacity: 0,
+        duration: 0.6,
+        ease: 'power2.in',
+        stagger: 0.03,
+      }
+    );
+  }
+
+  // Fade out .is-cshero on same timeline
+  if (isCshero) {
+    lettersOutTimeline.to(isCshero,
+      {
+        opacity: 0,
+        duration: 0.6,
+        ease: 'power2.in',
+      },
+      0
+    );
+  }
+
+  // Trigger: .first-after-sticky top reaches 80% viewport → letters OUT, scroll back → reverse
+  // End: when trigger top reaches top of viewport
+  const firstAfterSticky = document.querySelector('.first-after-sticky');
+  if (!firstAfterSticky) return;
+
+  ScrollTrigger.create({
+    trigger: firstAfterSticky,
+    start: 'top 80%',
+    end: 'top top',
+    onEnter: () => lettersOutTimeline.play(),
+    onLeaveBack: () => lettersOutTimeline.reverse(),
+  });
+};
+
 // Intro animation on page load
 window.introAnimation = function(e) {
   const introBrand = e.querySelector('[intro-brand]');
@@ -2911,6 +3014,10 @@ window.Webflow.push(() => {
     gsapTitleAnimation();
     gsapContainerAnimation();
     gsapFadeAnimation();
+    // Case Hero Animation - only if .first-after-sticky exists
+    if (document.querySelector('.first-after-sticky')) {
+      window.CaseHeroAnimation();
+    }
     // Refresh ScrollTrigger after creating all triggers to sync with Lenis
     ScrollTrigger.refresh();
   }, 200);