@widelab-nc/widelab 1.1.8 → 1.1.10

package/package.json

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

package/src/index.js

@@ -18,6 +18,25 @@ function customGsapEasing() {
 
 // Functions definitions
 
+// Contact form open animation
+let contactFormOpen;
+function contactFormOpenAnimation() {
+  const contactFormWrapper = document.querySelector('.contact-modal_main-wrapper');
+  const contactForm = document.querySelector('.contact-modal_content-wrapper');
+  contactFormOpen = gsap.timeline({paused: true});
+  contactFormOpen.to(contactFormWrapper, {
+    autoAlpha: 1,
+    duration: 0.2,
+    ease: 'loader2',
+  })
+  contactFormOpen.from(contactForm, {
+    x: '100%',
+    duration: 0.3,
+    ease: 'loader2',
+  }, '-=0.1')
+}
+
+
 //Smooth scroll init
   const lenis = new Lenis({
     duration: 1.2,
@@ -980,13 +999,13 @@ window.updateScrollTrigger = function() {
 
   // Custom checkboxes
 window.changeCheckboxLabelColor = function() {
-  var checkboxInputs = document.querySelectorAll('.w-checkbox-input');
+  let checkboxInputs = document.querySelectorAll('.w-checkbox-input');
 
-  var callback = function(mutationsList, observer) {
-    for(var mutation of mutationsList) {
+  let callback = function(mutationsList, observer) {
+    for(let mutation of mutationsList) {
       if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
-        var isChecked = mutation.target.classList.contains('w--redirected-checked');
-        var siblingLabel = mutation.target.parentElement.querySelector('.form-checkbox_label');
+        let isChecked = mutation.target.classList.contains('w--redirected-checked');
+        let siblingLabel = mutation.target.parentElement.querySelector('.form-checkbox_label');
 
         if (isChecked && siblingLabel && !siblingLabel.classList.contains('is-active')) {
           siblingLabel.classList.add('is-active');
@@ -998,13 +1017,24 @@ window.changeCheckboxLabelColor = function() {
   };
 
   checkboxInputs.forEach(function(checkboxInput) {
-    var config = { attributes: true, attributeFilter: ['class'] };
-    var observer = new MutationObserver(callback);
+    let config = { attributes: true, attributeFilter: ['class'] };
+    let observer = new MutationObserver(callback);
     observer.observe(checkboxInput, config);
   });
 
 }
 
+  // Contact modal open animation
+window.openContactModal = function() {
+  contactFormOpen.play();
+}
+
+// Contact modal close animation
+window.closeContactModal = function() {
+  contactFormOpen.timeScale(1.5).reverse();;
+}
+
+
   // !!!!!!!!! Keep this Alpine init at the end !!!!!!!!!
   window.Webflow ||= [];
   window.Webflow.push(() => {
@@ -1025,7 +1055,8 @@ window.changeCheckboxLabelColor = function() {
     pageLoadAnimation();
     pageTransitionAnimation();
     customCursorOnClick();
+    contactFormOpenAnimation();
     if (window.innerWidth < 992) {
       disableScrollMenu();
-    }
+    };
   });