@widelab-nc/widehue 1.0.44 → 1.0.45

package/package.json

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

package/src/index.js

@@ -1479,16 +1479,50 @@ window.animationTest4 = function(root) {
 
 
 window.pricingInteraction = function(e) {
+  console.log('[pricingInteraction] Function called');
+  console.log('[pricingInteraction] Window width:', window.innerWidth);
+
   // Check if the screen width is 992px or wider
   if (window.innerWidth >= 992) {
+    console.log('[pricingInteraction] Desktop mode - creating pin');
+
+    const tabsContent = document.querySelector('.tabs-content');
+    const tabsMenu = document.querySelector('.tabs-menu');
+
+    console.log('[pricingInteraction] .tabs-content found:', tabsContent);
+    console.log('[pricingInteraction] .tabs-menu found:', tabsMenu);
+
+    if (!tabsContent || !tabsMenu) {
+      console.error('[pricingInteraction] Required elements not found!');
+      return;
+    }
+
+    // Debug computed styles
+    const tabsContentStyles = window.getComputedStyle(tabsContent);
+    const tabsMenuStyles = window.getComputedStyle(tabsMenu);
+    console.log('[pricingInteraction] .tabs-content styles:', {
+      position: tabsContentStyles.position,
+      height: tabsContentStyles.height,
+      display: tabsContentStyles.display,
+    });
+    console.log('[pricingInteraction] .tabs-menu styles:', {
+      position: tabsMenuStyles.position,
+      height: tabsMenuStyles.height,
+      display: tabsMenuStyles.display,
+    });
+
     // Create the pinning effect
-    ScrollTrigger.create({
+    const trigger = ScrollTrigger.create({
       trigger: ".tabs-content",
-      start: "top-=48px top", // Start pinning 48px after the top of the .tabs-content hits the top of the viewport
-      end: "bottom bottom", // Stop pinning when the bottom of the .tabs-content hits the bottom of the viewport
-      pin: ".tabs-menu", // The element to pin
-      pinSpacing: false // Maintain space for pinned element (optional)
+      start: "top-=48px top",
+      end: "bottom bottom",
+      pin: ".tabs-menu",
+
     });
+
+    console.log('[pricingInteraction] ScrollTrigger created:', trigger);
+  } else {
+    console.log('[pricingInteraction] Mobile mode - skipping pin');
   }
 };
 
@@ -2527,6 +2561,42 @@ window.formSubmitAnimation = function(e) {
   observeDisplayChanges();
 }
 
+// Scrubbed timeline: progress tied to scroll progress
+window.initBentoRevealScrub = function (container) {
+  // Respect reduced motion
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+    container.querySelectorAll(':scope > *').forEach(el => {
+      el.style.opacity = 1;
+      el.style.transform = 'none';
+    });
+    return;
+  }
+
+  const items = Array.from(container.children); // direct children only
+
+  // Important: define from state in timeline for scrub to interpolate smoothly
+  const tl = gsap.timeline({
+    scrollTrigger: {
+      trigger: container,
+      start: 'top 90%',     // start easing in slightly later
+      end: 'bottom 65%',    // full reveal by near the end of container
+      scrub: 0.5,           // smoothing; use true for no smoothing
+      markers: false,     // uncomment for debugging
+    }
+  });
+
+  tl.fromTo(items,
+    { opacity: 0, y: 28 },
+    {
+      opacity: 1,
+      y: 0,
+      ease: 'power2.out',
+      // Duration is ignored by scrub; timeline length maps to scroll distance.
+      // Stagger distributes the items across the timeline for a nice cascade.
+      stagger: { each: 0.12 }
+    }
+  );
+};
 
 
 // Refresh Gsap scrollTriggers
@@ -2563,6 +2633,283 @@ window.closeInfoBar = function() {
 }
 
 
+// Hero 2026 animation - navbar letters on scroll
+// EXPERIMENTAL: play/reverse version (to revert: replace this whole function with scrub version)
+window.heroAnimation2026 = function(e) {
+  const wideletters = document.querySelectorAll('.wideletter');
+  const introSection = document.querySelector('[x-init*="introAnimation"]');
+
+  if (!introSection) return;
+
+  // Wideletters animation timeline (paused)
+  const widelettersTimeline = gsap.timeline({ paused: true });
+  widelettersTimeline.fromTo(wideletters,
+    { y: '-150%' },
+    {
+      y: '0%',
+      duration: 0.8,
+      ease: 'power2.out',
+      stagger: 0.05,
+    }
+  );
+
+  // Trigger for wideletters
+  ScrollTrigger.create({
+    trigger: introSection,
+    start: 'bottom bottom-=25%',
+    onEnter: () => widelettersTimeline.play(),
+    onLeaveBack: () => widelettersTimeline.reverse(),
+  });
+
+  // Partner section animation
+  const partnerSection = document.querySelector('#partner');
+  const heroFlex = document.querySelector('.hero-flex');
+  const coverBg = document.querySelector('.cover-bg');
+
+  if (!partnerSection || !heroFlex || !coverBg) return;
+
+  // Partner timeline (cover-bg + wideletters reverse)
+  const partnerTimeline = gsap.timeline({ paused: true });
+
+  // Cover-bg fade-in
+  partnerTimeline.fromTo(coverBg,
+    { opacity: 0 },
+    { opacity: 1, duration: 0.6, ease: 'power2.out' },
+    0
+  );
+
+  // Reverse wideletters
+  partnerTimeline.to(wideletters, {
+    y: '-150%',
+    duration: 0.6,
+    ease: 'power2.in',
+    stagger: 0.03,
+  }, 0);
+
+  // Trigger for partner timeline
+  ScrollTrigger.create({
+    trigger: partnerSection,
+    start: 'top 80%',
+    onEnter: () => partnerTimeline.play(),
+    onLeaveBack: () => partnerTimeline.reverse(),
+  });
+};
+
+// Intro animation on page load
+window.introAnimation = function(e) {
+  const introBrand = e.querySelector('[intro-brand]');
+  const introSubtitle = e.querySelector('[intro-subtitle]');
+  const widelettersIntro = e.querySelectorAll('.wideletter-intro');
+
+  // Set initial states
+  gsap.set([introBrand, introSubtitle], { opacity: 0 });
+  gsap.set(widelettersIntro, { y: '-150%' });
+
+  // Prevent browser scroll restoration and force scroll to top
+  history.scrollRestoration = 'manual';
+  window.scrollTo(0, 0);
+
+  // Lock scroll: position fixed keeps scrollbar visible but prevents scrolling
+  document.body.style.position = 'fixed';
+  document.body.style.top = '0px';
+  document.body.style.width = '100%';
+
+  // Page load animation - scroll timeline is created AFTER this completes
+  const introTimeline = gsap.timeline({
+    onComplete: () => {
+      // Unlock scroll
+      document.body.style.position = '';
+      document.body.style.top = '';
+      document.body.style.width = '';
+      window.scrollTo(0, 0);
+
+      // Force all letters to final state before creating ScrollTrigger
+      gsap.set(widelettersIntro, { y: '0%', opacity: 1 });
+      gsap.set(introBrand, { opacity: 1 });
+
+      // Small delay to ensure DOM is ready, then create scroll timeline and refresh ScrollTrigger
+      requestAnimationFrame(() => {
+        createScrollTimeline();
+        ScrollTrigger.refresh();
+      });
+    }
+  });
+
+  introTimeline.to(introBrand, {
+    opacity: 1,
+    duration: 0.1,
+  });
+
+  introTimeline.to(widelettersIntro, {
+    y: '0%',
+    duration: 1,
+    ease: 'loader2',
+    stagger: 0.1,
+  });
+
+  // EXPERIMENTAL: play/reverse version (no parallax)
+  function createScrollTimeline() {
+    // Timeline 1: Letters out
+    const lettersOutTimeline = gsap.timeline({ paused: true });
+    lettersOutTimeline.to(widelettersIntro, {
+      y: '-150%',
+      opacity: 0,
+      duration: 0.6,
+      ease: 'power2.in',
+      stagger: 0.03,
+    });
+
+    // Trigger 1: Letters out (at 20% of section)
+    ScrollTrigger.create({
+      trigger: e,
+      start: 'top top-=20%',
+      onEnter: () => lettersOutTimeline.play(),
+      onLeaveBack: () => lettersOutTimeline.reverse(),
+    });
+
+    // Timeline 2: Subtitle in
+    const subtitleInTimeline = gsap.timeline({ paused: true });
+    subtitleInTimeline.fromTo(introSubtitle,
+      { y: '50%', opacity: 0 },
+      { y: '0%', opacity: 1, duration: 0.6, ease: 'power2.out' }
+    );
+
+    // Trigger 2: Subtitle in (at 90% of section)
+    ScrollTrigger.create({
+      trigger: e,
+      start: 'top top-=90%',
+      onEnter: () => subtitleInTimeline.play(),
+      onLeaveBack: () => subtitleInTimeline.reverse(),
+    });
+
+    // Timeline 3: Subtitle out
+    const subtitleOutTimeline = gsap.timeline({ paused: true });
+    subtitleOutTimeline.to(introSubtitle, {
+      opacity: 0,
+      duration: 0.5,
+      ease: 'power2.out',
+    });
+
+    // Trigger 3: Subtitle out (at 140% - well into section scroll)
+    ScrollTrigger.create({
+      trigger: e,
+      start: 'top top-=140%',
+      onEnter: () => subtitleOutTimeline.play(),
+      onLeaveBack: () => subtitleOutTimeline.reverse(),
+    });
+  }
+};
+
+// Global GSAP title animation - animates [gsap-title] elements on scroll
+function gsapTitleAnimation() {
+  const gsapTitles = document.querySelectorAll('[gsap-title]');
+
+  if (gsapTitles.length === 0) return;
+
+  gsapTitles.forEach((titleElement) => {
+    // Split text into lines
+    const splitTitle = new SplitText(titleElement, {
+      type: 'lines',
+      linesClass: 'gsap-title-line',
+    });
+
+    // Create mask wrapper for each line
+    const splitTitleMask = new SplitText(titleElement, {
+      type: 'lines',
+      linesClass: 'gsap-title-line-mask',
+    });
+
+    const lines = titleElement.querySelectorAll('.gsap-title-line');
+
+    if (lines.length === 0) return;
+
+    // Set initial state - lines hidden below
+    gsap.set(lines, { y: '100%' });
+
+    // Create paused timeline
+    const titleTimeline = gsap.timeline({ paused: true });
+
+    titleTimeline.to(lines, {
+      y: '0%',
+      duration: 0.75,
+      stagger: 0.2,
+      ease: 'loader2',
+    });
+
+    // Create ScrollTrigger with play/reverse
+    ScrollTrigger.create({
+      trigger: titleElement,
+      start: 'top 80%',
+      onEnter: () => titleTimeline.play(),
+      onLeaveBack: () => titleTimeline.reverse(),
+    });
+  });
+}
+
+// Global GSAP container animation - animates direct children of [gsap-container]
+function gsapContainerAnimation() {
+  const gsapContainers = document.querySelectorAll('[gsap-container]');
+
+  if (gsapContainers.length === 0) return;
+
+  gsapContainers.forEach((container) => {
+    const children = container.children;
+
+    if (children.length === 0) return;
+
+    // Set initial state
+    gsap.set(children, { y: '4rem', opacity: 0 });
+
+    // Create paused timeline
+    const containerTimeline = gsap.timeline({ paused: true });
+
+    containerTimeline.to(children, {
+      y: '0rem',
+      opacity: 1,
+      duration: 1,
+      stagger: 0.1,
+      ease: 'power3.out',
+    });
+
+    // Create ScrollTrigger with play/reverse
+    ScrollTrigger.create({
+      trigger: container,
+      start: 'top 80%',
+      onEnter: () => containerTimeline.play(),
+      onLeaveBack: () => containerTimeline.reverse(),
+    });
+  });
+}
+
+// Global GSAP fade animation - fades in [gsap-fade] elements on scroll
+function gsapFadeAnimation() {
+  const gsapFadeElements = document.querySelectorAll('[gsap-fade]');
+
+  if (gsapFadeElements.length === 0) return;
+
+  gsapFadeElements.forEach((element) => {
+    // Set initial state
+    gsap.set(element, { opacity: 0 });
+
+    // Create paused timeline
+    const fadeTimeline = gsap.timeline({ paused: true });
+
+    fadeTimeline.to(element, {
+      opacity: 1,
+      duration: 2,
+      ease: 'power3.out',
+    });
+
+    // Create ScrollTrigger with play/reverse
+    ScrollTrigger.create({
+      trigger: element,
+      start: 'top 65%',
+      onEnter: () => fadeTimeline.play(),
+      onLeaveBack: () => fadeTimeline.reverse(),
+    });
+  });
+}
+
 // !!!!!!!!! Keep this Alpine init at the end !!!!!!!!!
 window.Webflow ||= [];
 window.Webflow.push(() => {
@@ -2586,6 +2933,9 @@ window.Webflow.push(() => {
   contactFormOpenAnimation();
   openContactFormFromURL();
   disableScrollMenu();
+  gsapTitleAnimation();
+  gsapContainerAnimation();
+  gsapFadeAnimation();
   refreshScrollTriggersAfterLoad();
 
 });