@widelab-nc/widelab 1.1.39 → 1.1.41

package/package.json

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

package/src/index.js

@@ -481,56 +481,116 @@ window.customCursorTextUpdate = function(el) {
 
 
 
-  // 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,
+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) {
@@ -836,7 +896,7 @@ window.partnerSlider = function (e) {
   // Initialize Splide with drag restored
   const splide = new Splide(e, {
     type: 'slide',
-    fixedWidth: '31.5%',
+    fixedWidth: '23.5%',
     padding: { left: '2.5rem', right: 0 },
     focus: 0,
     gap: 0,