@widelab-nc/widelab 1.0.21 → 1.0.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +2 -2
- package/dist/index.js.map +3 -3
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/index.js +69 -16
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
html.lenis{height:auto}.splide__list{user-select:none}.hero_headline.is-cta{text-wrap:balance}#heroHeading{pointer-events:none;user-select:none}.hero_headline-span{pointer-events:auto;z-index:-1}.hero-line-mask:first-of-type{z-index:2}.
|
|
1
|
+
html.lenis{height:auto}.splide__list{user-select:none}.hero_headline.is-cta{text-wrap:balance}#heroHeading{pointer-events:none;user-select:none}.hero_headline-span{pointer-events:auto;z-index:-1}.hero-line-mask:first-of-type{z-index:2}.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}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_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}.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}.splide__pagination.facts-pagination{top:13.5rem;left:0;right:0}.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
CHANGED
package/src/index.js
CHANGED
|
@@ -186,7 +186,7 @@ function customGsapEasing() {
|
|
|
186
186
|
ScrollTrigger.create({
|
|
187
187
|
start: 'top top',
|
|
188
188
|
endTrigger: '.bottom-wrapper',
|
|
189
|
-
end: 'bottom
|
|
189
|
+
end: 'bottom bottom',
|
|
190
190
|
onUpdate: (self) => {
|
|
191
191
|
self.direction === -1 ? showHideHeader.play() : showHideHeader.reverse();
|
|
192
192
|
},
|
|
@@ -409,23 +409,76 @@ function customGsapEasing() {
|
|
|
409
409
|
});
|
|
410
410
|
|
|
411
411
|
// Animations
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
document.querySelector('.facts-slide_diagram-trigger.is-2').click();
|
|
412
|
+
// Function to play video on the active slide
|
|
413
|
+
function playActiveSlideVideo(newIndex) {
|
|
414
|
+
var activeSlide = factsSplide.Components.Elements.slides[newIndex];
|
|
415
|
+
var activeVideo = activeSlide.querySelector('video');
|
|
416
|
+
if (activeVideo) {
|
|
417
|
+
activeVideo.play();
|
|
419
418
|
}
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
// Function to pause and rewind videos on inactive slides
|
|
422
|
+
function pauseAndRewindInactiveVideos(newIndex) {
|
|
423
|
+
var slides = factsSplide.Components.Elements.slides;
|
|
424
|
+
slides.forEach(function (slide, index) {
|
|
425
|
+
var video = slide.querySelector('video');
|
|
426
|
+
if (video && index !== newIndex) {
|
|
427
|
+
video.pause();
|
|
428
|
+
video.currentTime = 0; // rewind the video
|
|
429
|
+
}
|
|
430
|
+
});
|
|
431
|
+
}
|
|
432
|
+
// Function to animate elements on the active slide
|
|
433
|
+
function animateSlideElements(slide) {
|
|
434
|
+
gsap.fromTo(
|
|
435
|
+
[
|
|
436
|
+
slide.querySelector('.is-h4'),
|
|
437
|
+
slide.querySelector('.facts-slide_legend-wrapper'),
|
|
438
|
+
slide.querySelector('.facts-slide_diagram-wrapper'),
|
|
439
|
+
slide.querySelector('.facts-slide_source')
|
|
440
|
+
],
|
|
441
|
+
{
|
|
442
|
+
x: '2rem',
|
|
443
|
+
opacity: 0
|
|
444
|
+
},
|
|
445
|
+
{
|
|
446
|
+
x: '0',
|
|
447
|
+
opacity: 1,
|
|
448
|
+
stagger: 0.2,
|
|
449
|
+
duration: 0.5,
|
|
450
|
+
easing: 'loader2'
|
|
451
|
+
}
|
|
452
|
+
);
|
|
453
|
+
}
|
|
454
|
+
// Function to reset animation for the elements in the slide
|
|
455
|
+
function resetSlideAnimation(slide) {
|
|
456
|
+
gsap.set(
|
|
457
|
+
[
|
|
458
|
+
slide.querySelector('.is-h4'),
|
|
459
|
+
slide.querySelector('.facts-slide_legend-wrapper'),
|
|
460
|
+
slide.querySelector('.facts-slide_diagram-wrapper'),
|
|
461
|
+
slide.querySelector('.facts-slide_source')
|
|
462
|
+
],
|
|
463
|
+
{
|
|
464
|
+
x: '2rem',
|
|
465
|
+
opacity: 0
|
|
466
|
+
}
|
|
467
|
+
);
|
|
468
|
+
}
|
|
469
|
+
// Event listener for 'move' event
|
|
470
|
+
factsSplide.on('move', function (newIndex) {
|
|
471
|
+
playActiveSlideVideo(newIndex);
|
|
472
|
+
var activeSlide = factsSplide.Components.Elements.slides[newIndex];
|
|
473
|
+
animateSlideElements(activeSlide);
|
|
420
474
|
});
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
document.querySelector('.facts-slide_diagram-trigger.is-0').click();
|
|
427
|
-
},
|
|
475
|
+
// Event listener for 'moved' event
|
|
476
|
+
factsSplide.on('moved', function (oldIndex) {
|
|
477
|
+
pauseAndRewindInactiveVideos(oldIndex);
|
|
478
|
+
var previousSlide = factsSplide.Components.Elements.slides[oldIndex];
|
|
479
|
+
resetSlideAnimation(previousSlide);
|
|
428
480
|
});
|
|
481
|
+
|
|
429
482
|
}
|
|
430
483
|
|
|
431
484
|
// Team slider
|
|
@@ -927,4 +980,4 @@ function customGsapEasing() {
|
|
|
927
980
|
disableScrollMenu();
|
|
928
981
|
}
|
|
929
982
|
|
|
930
|
-
});
|
|
983
|
+
});
|