@widelab-nc/widelab 1.0.4 → 1.0.5

package/dist/style.css

@@ -0,0 +1 @@
+html.lenis{height:auto}.hero_headline.is-cta{text-wrap:balance}#homeHeroHeading{pointer-events:none}.hero_headline-span{pointer-events:auto;z-index:-1}.hero-line-mask:first-of-type{z-index:2}.hero_headline-span{aspect-ratio:65/23}.clients_collection_item_wrapper{aspect-ratio:1/1}.start_diagram_step_path-mask{aspect-ratio:2/1}.splide__track{overflow:visible}.splide__pagination__page.reviews-page,.splide__pagination__page.facts-page{height:.625rem;width:.625rem;background:#b2b2b2;opacity:.5;margin:.25rem}.splide__pagination__page.reviews-page.is-active,.splide__pagination__page.facts-page.is-active{height:.625rem;width:.625rem;background:#000;opacity:1;transform:none}.footer_logo-svg{aspect-ratio:1286/185}address{font-style:normal}.bottom-wrapper_footer-spacer,.whats-next_links_item_image-wrapper,.reel-modal_player{pointer-events:none}.skills_item_hover-track.is-design{white-space:nowrap;will-change:transform;animation:marquee-horizontal 12s linear infinite}.skills_item_hover-track.is-branding,.skills_item_hover-track.is-nocode{white-space:nowrap;will-change:transform;animation:marquee-horizontal 5s linear infinite}@keyframes marquee-horizontal{0%{transform:translate(0)}to{transform:translate(-50%)}}.splide__pagination.facts-pagination{padding:0;align-items:start;justify-content:left}.hero-line-mask,.stats-line-mask,.facts-line-mask,.cs-line-mask{clip-path:polygon(0 0,100% 0,100% 110%,0 110%)}@media only screen and (min-width: 992px){#csSingleFooter{position:static}#csItemTransformWrapper,#csItemNotTransformWrapper{padding-left:2.5rem;padding-right:2.5rem}.portfolio_item_image-wrapper.is-portrait{aspect-ratio:31/32}.portfolio_item_image-wrapper{aspect-ratio:4/3}.portfolio_wrapper.is-2-col>.portfolio_item:first-child .portfolio_item_content,.portfolio_item.is-1-left .portfolio_item_content{padding-left:2.5rem}.splide__pagination.reviews-pagination{bottom:-3.625rem}.splide__pagination.facts-pagination{bottom:2.25rem;left:0;right:0}#stickyNavbar{padding:1rem 2.5rem}.button_small .link,.portfolio_item .is-p-l.is-link,.cookies-button{position:relative;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-position:0 100%;background-repeat:no-repeat;background-size:100% .08em;transition:background-size .2s cubic-bezier(.65,0,.35,1)}.button_small:hover .link,.button_small:focus .link,.portfolio_item:hover .is-p-l.is-link,.portfolio_item:active .is-p-l.is-link,.cookies-button:hover,.cookies-button:active{background-size:0% .08em}.button_small .button_small_icon_circle,.cta_link .cta_link_icon-wrapper{position:relative}.button_small .button_small_icon_circle:after,.cta_link .cta_link_icon-wrapper:after{background-color:inherit;border-radius:50%;content:"";position:absolute;inset:0;z-index:-1;transition:.3s cubic-bezier(.83,0,.17,1)}.button_small:hover .button_small_icon_circle:after,.cta_link:hover .cta_link_icon-wrapper:after{scale:1.2}.navbar_menu_link,.footer_menu_link,.is-link,.cta_link .is-h4{position:relative;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-position:0 100%;background-repeat:no-repeat;background-size:0% .08em;transition:background-size .2s cubic-bezier(.65,0,.35,1)}.navbar_menu_link:hover,.navbar_menu_link:focus,.footer_menu_link:hover,.footer_menu_link:focus,.is-link:hover,.is-link_link:focus,.cta_link:hover .is-h4,.cta_link:focus .is-h4{background-size:100% .08em}}@media only screen and (max-width: 1180px) and (min-width: 992px){.stats-content_wrapper{padding-right:4vw}}@media only screen and (max-width: 1280px) and (min-width: 992px){.section.is-cs-2col{padding-left:2.5rem;padding-right:2.5rem}}@media only screen and (max-width: 991px){.navbar .button_small .button_small_icon_circle{display:none}#csItemTransformWrapper{padding-left:1.75rem;padding-right:1.75rem}.portfolio_item_image-wrapper{aspect-ratio:6/5}.button_small .link,.portfolio_item .is-p-l.is-link,.cta_link.is-mobile-nav .is-p-l,.cookies-button{position:relative;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-position:0 100%;background-repeat:no-repeat;background-size:100% .08em}.splide__pagination.reviews-pagination{bottom:-3.5rem}.splide__pagination.facts-pagination{top:15.25rem;left:0;right:0}.splide__list.team_collection_list{overflow:visible}}@media only screen and (max-width: 767px){#csItemTransformWrapper{padding-left:1.375rem;padding-right:1.375rem}.reel_prev_mask{aspect-ratio:19/22}.splide__pagination.facts-pagination{top:13.5rem;left:0;right:0}.portfolio_item_image-wrapper{aspect-ratio:95/79}.splide__pagination.reviews-pagination{bottom:-3rem}}.background-video{height:100%;position:relative;overflow:hidden}.background-video>video{width:100%;height:100%;object-fit:cover;z-index:-100;background-position:50%;background-size:cover;margin:auto;position:absolute;inset:-100%}.background-video>video::-webkit-media-controls-start-playback-button{-webkit-appearance:none;display:none!important}.background-video--control{background-color:#0000;padding:0;position:absolute;bottom:1em;right:1em}.background-video--control>[hidden]{display:none!important}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widelab-nc/widelab",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Widelab starter template based on Finsweet template + add-ons.",
   "homepage": "https://widelab.co",
   "license": "ISC",
@@ -19,6 +19,18 @@
   "files": [
     "dist"
   ],
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ./bin/build.js",
+    "build": "cross-env NODE_ENV=production node ./bin/build.js",
+    "lint": "eslint --ignore-path .gitignore ./src && prettier --check ./src",
+    "lint:fix": "eslint --ignore-path .gitignore ./src --fix",
+    "check": "tsc --noEmit",
+    "format": "prettier --write ./src",
+    "test": "pnpm playwright test",
+    "test:headed": "pnpm playwright test --headed",
+    "release": "changeset publish",
+    "update": "pnpm update -i -L -r"
+  },
   "devDependencies": {
     "@changesets/changelog-git": "^0.1.14",
     "@changesets/cli": "^2.26.0",
@@ -38,22 +50,7 @@
     "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@splidejs/splide": "^4.1.4",
-    "@studio-freight/lenis": "^1.0.25",
     "alpinejs": "^3.13.0",
-    "gsap": "npm:@gsap/business@^3.12.2",
-    "lozad": "^1.16.0"
-  },
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development node ./bin/build.js",
-    "build": "cross-env NODE_ENV=production node ./bin/build.js",
-    "lint": "eslint --ignore-path .gitignore ./src && prettier --check ./src",
-    "lint:fix": "eslint --ignore-path .gitignore ./src --fix",
-    "check": "tsc --noEmit",
-    "format": "prettier --write ./src",
-    "test": "pnpm playwright test",
-    "test:headed": "pnpm playwright test --headed",
-    "release": "changeset publish",
-    "update": "pnpm update -i -L -r"
+    "gsap": "npm:@gsap/business@^3.12.2"
   }
-}
+}

package/src/index.js

@@ -1,227 +1,13 @@
-//import {initAlpine} from "./init";
-import Lenis from '@studio-freight/lenis';
-import { gsap } from 'gsap';
-import { CustomEase } from 'gsap/CustomEase';
-import { ScrollToPlugin } from 'gsap/ScrollToPlugin';
-import { ScrollTrigger } from 'gsap/ScrollTrigger';
-import { SplitText } from 'gsap/SplitText';
-import lozad from 'lozad';
-import Splide from '@splidejs/splide';
-import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin';
+import {initAlpine} from "./init";
 
-// Register GSAP plugins
-gsap.registerPlugin(DrawSVGPlugin, ScrollTrigger, SplitText, CustomEase, ScrollToPlugin);
+// Before you start:
+// 1. Change name and URL in package.json file
+// 2. Build and release to npm
+// 3. Replace the npm path in Webflow site custom footer code
+// 4. Remove these comments
 
-// Define smooth scroll
-  const lenis = new Lenis({
-    duration: 1.2,
-    easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t))
-  });
-
-// Lenis scroll start function
-function lenisScroll() {
-    function raf(time) {
-      lenis.raf(time);
-      requestAnimationFrame(raf);
-    }
-    requestAnimationFrame(raf);
-  }
-
-  // Lazy load library init
-function lazyLoad() {
-  const observer = lozad('img, video:not(#fullReel)', {
-    loaded: function (el) {
-      // Custom code to run when an image or video is loaded
-    },
-  });
-  observer.observe();
-}
-
-  // Custom ease for GSAP
-function customGsapEasing(){
-  CustomEase.create('loader', '0.83, 0, 0.17, 1');
-  CustomEase.create('loader2', '0.77, 0, 0.175, 1');
-}
-
-// Reload page on browser back action
-function reloadOnBack() {
-  window.addEventListener('pageshow', function (event) {
-    if (event.persisted) {
-      window.location.reload();
-    }
-  });
-}
-
-// Page load animation
-  const loaderAnimationIn = gsap.timeline({});
-  loaderAnimationIn.add(function() {
-    history.scrollRestoration = 'manual';
-    gsap.to(window, { duration: 0.05, scrollTo: 0 });
-    lenis.scrollTo(0);
-  });
-  loaderAnimationIn.add(function() {
-    lenis.stop();
-  }, '>');
-  loaderAnimationIn.to(
-    '.loader_ract',
-    {
-      delay: 0.2,
-      duration: 0.8,
-      width: 0,
-      ease: 'loader2',
-    },
-    '>'
-  );
-  loaderAnimationIn.add(function() {
-    lenis.start();
-  }, '>');
-  loaderAnimationIn.to('.loader_wrapper', { display: 'none', duration: 0.1 }, '>');
-
-// Page transition animation
-function transitionLinksRule() {
-  const transitionLinks = document.querySelectorAll(
-    'a:not([href^="#"]):not([href^="javascript:"]):not([href=""]):not([href^="mailto:"]):not([href^="tel:"])'
-  );
-  transitionLinks.forEach((link) => {
-    if (link.getAttribute('target') !== '_blank') {
-      link.addEventListener('click', (e) => {
-        e.preventDefault();
-
-        const loaderAnimationOut = gsap.timeline({
-          onComplete: () => {
-            window.location.href = link.href;
-          },
-        });
-        loaderAnimationOut.to('.unloader_wrapper', { display: 'flex', duration: 0.05 });
-        loaderAnimationOut.from('.unloader_ract', {
-          duration: 0.4,
-          width: '0%',
-          ease: 'loader2',
-        }),
-          '>';
-        // play the timeline
-        loaderAnimationOut.play();
-      });
-    }
-  });
-}
-
-// Reset loader display on screen resize
-function onScreenResize() {
-  window.addEventListener('resize', function () {
-    setTimeout(function () {
-      gsap.set('.loader_wrapper', { display: 'none' });
-    }, 50);
-  });
-}
-
-// Hero move to reveal footer
-function revealFooter() {
-  gsap.to('#heroSection', {
-    scrollTrigger: {
-      trigger: '#bottomWrapper',
-      start: 'top bottom',
-      toggleActions: 'restart none none reverse',
-    },
-    y: '-100%',
-  });
-}
-
-// Custom cursor on mousedown and mouse up
-function customCursorOnClick() {
-  const cursorElements = document.querySelectorAll('[wide="customCursor"]');
-  const customCursor = document.querySelector('.custom_cursor');
-  cursorElements.forEach((element) => {
-    element.addEventListener('mousedown', function () {
-      customCursor.style.transform = 'scale3d(0.8, 0.8, 1)';
-    });
-    element.addEventListener('mouseup', function () {
-      customCursor.style.transform = 'scale3d(1, 1, 1)';
-    });
-  });
-}
-
-// Custom cursor copy change on hover
-function customCursorChangeCopy() {
-  document.addEventListener('DOMContentLoaded', function () {
-    const customCursorElements = document.querySelectorAll('[wideCursorText]');
-    customCursorElements.forEach(function (element) {
-      element.addEventListener('mouseenter', () => {
-        const wideCursorTextValue = element.getAttribute('wideCursorText');
-        const customCursorTextElement = document.querySelector('.custom_cursor_text');
-        customCursorTextElement.innerHTML = wideCursorTextValue;
-      });
-    });
-  });
-}
-
-// Header animations
-const showHideHeader = gsap.from('.navbar', {
-    y: '-100%',
-    paused: true,
-    duration: 0.2,
-    ease: 'loader2',
-  })
-  .progress(1);
-
-// Header animation on scroll
-function headeronScroll() {
-  ScrollTrigger.create({
-    start: 'top top',
-    endTrigger: '.bottom-wrapper',
-    end: 'bottom top+=100px',
-    onUpdate: (self) => {
-      self.direction === -1 ? showHideHeader.play() : showHideHeader.reverse();
-    },
-  });
-}
-
-// Page load animation
-const homeLoadAnimation = gsap.timeline({}),
-  homeHeroHeading = new SplitText('#homeHeroHeading', {
-    type: 'lines',
-    linesClass: 'hero-line',
-  }),
-  homeHeroHeadingMask = new SplitText('#homeHeroHeading', {
-    type: 'lines',
-    linesClass: 'hero-line-mask',
-  });
-homeLoadAnimation.add(loaderAnimationIn.play());
-homeLoadAnimation.from('.navbar', {
-  opacity: 0,
-  duration: 0.6,
-  ease: 'loader2',
-}),
-  '>-2';
-homeLoadAnimation.from(
-  '.hero-line',
-  {
-    duration: 1.2,
-    y: '100%',
-    stagger: 0.2,
-    ease: 'loader2',
-  },
-  '>-0.5'
-);
-homeLoadAnimation.to(
-  '.hero_headline_ract-mask',
-  {
-    width: '0%',
-    duration: 0.6,
-    ease: 'loader2',
-  },
-  '>-0.6'
-);
-homeLoadAnimation.from(
-  '#heroSubtitle',
-  {
-    opacity: 0,
-    duration: 1,
-    ease: 'loader2',
-  },
-  '>-0.4'
-);
 
+// -----> Write your functions here
 
 
 
@@ -232,15 +18,5 @@ homeLoadAnimation.from(
 // !!!!!!!!! Keep this Alpine init at the end !!!!!!!!!
 window.Webflow ||= [];
 window.Webflow.push(() => {
-  //initAlpine();
-  lenisScroll();
-  customGsapEasing();
-  lazyLoad();
-  reloadOnBack();
-  transitionLinksRule();
-  onScreenResize();
-  revealFooter();
-  customCursorOnClick();
-  customCursorChangeCopy();
-  headeronScroll();
+  initAlpine();
 });