@widelab-nc/widelab 1.0.6 → 1.0.8

package/dist/style.css

@@ -1,2 +1 @@
 .splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;contain:strict;display:inline-block;height:20px;inset:0;margin:auto;position:absolute;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports (outline-offset: -3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast: none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports (outline-offset: -3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast: none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;inset:0 .5em 0 auto;padding:1em 0}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}
-/*# sourceMappingURL=style.css.map */

package/package.json

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

package/src/index.js

@@ -2,10 +2,11 @@ import {initAlpine} from "./init";
 import Lenis from '@studio-freight/lenis';
 import gsap from 'gsap';
 import { ScrollTrigger } from "gsap/ScrollTrigger";
+import { ScrollToPlugin } from "gsap/ScrollToPlugin";
 import { CustomEase } from "gsap/CustomEase";
 
 // GSAP plugins register and custom easing
-gsap.registerPlugin(ScrollTrigger, CustomEase);
+gsap.registerPlugin(ScrollTrigger, ScrollToPlugin, CustomEase);
 function customGsapEasing() {
   CustomEase.create('loader', '0.83, 0, 0.17, 1');
   CustomEase.create('loader2', '0.77, 0, 0.175, 1');
@@ -13,13 +14,17 @@ function customGsapEasing() {
 
 // Functions definitions
 
-
 //Smooth scroll init
   const lenis = new Lenis({
     duration: 1.2,
     easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
   });
   function lenisScroll() {
+    lenis.on('scroll', ScrollTrigger.update);
+    gsap.ticker.add((time)=>{
+      lenis.raf(time * 1000)
+    })
+    gsap.ticker.lagSmoothing(0)
     function raf(time) {
       lenis.raf(time);
       requestAnimationFrame(raf);
@@ -49,23 +54,62 @@ function customGsapEasing() {
   }
 }
 
-// Reload page on browser back action
-function reloadOnBack() {
-  window.addEventListener('pageshow', function (event) {
-    if (event.persisted) {
-      window.location.reload();
-    }
-  });
-}
+  // Reload page on browser back action
+  function reloadOnBack() {
+    window.addEventListener('pageshow', function (event) {
+      if (event.persisted) {
+        window.location.reload();
+      }
+    });
+  }
 
-// Scroll disable
-function disableScrollMenu() {
-    const script = document.createElement('script');
-    script.src =
-      'https://cdn.jsdelivr.net/npm/@finsweet/attributes-scrolldisable@1/scrolldisable.js';
-    script.defer = true;
-    document.head.appendChild(script);
-}
+  // Scroll disable
+  function disableScrollMenu() {
+      const script = document.createElement('script');
+      script.src =
+        'https://cdn.jsdelivr.net/npm/@finsweet/attributes-scrolldisable@1/scrolldisable.js';
+      script.defer = true;
+      document.head.appendChild(script);
+  }
+
+  // Hero move to reveal footer
+  function revealFooter() {
+    gsap.to('#heroSection', {
+      scrollTrigger: {
+        trigger: '#bottomWrapper',
+        start: 'top bottom',
+        toggleActions: 'restart none none reverse',
+      },
+      y: '-100%',
+    });
+  }
+
+  // Page load animation
+  function loadingAnimation() {
+    const loaderAnimationIn = gsap.timeline({});
+    loaderAnimationIn
+      .add(function() {
+        history.scrollRestoration = 'manual';
+        lenis.scrollTo(0);
+      })
+      .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 }, '>');
+  }
 
   // Place video inside the text
   window.videoInsideText = function(e)  {
@@ -91,12 +135,17 @@ window.Webflow.push(() => {
   console.log('The new code source is loaded!');
   initAlpine();
   lazyLoadVideos();
-  lenisScroll();
-  lenis.stop();
-  lenis.start();
+  if (Webflow.env("editor") === undefined) {
+    lenisScroll();
+  } else {
+    console.log('Editor mode!');
+  }
   customGsapEasing();
   reloadOnBack();
+  revealFooter();
+  loadingAnimation();
   if (window.innerWidth < 992) {
     disableScrollMenu();
   }
+
 });