/* Keyframes for slide-in and slide-out animations */ @keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } @keyframes slideOutLeft { from { transform: translateX(0); } to { transform: translateX(-100%); } } /* Custom styles to manage Off Canvas visibility */ .e-off-canvas-hidden { animation: slideOutLeft 1s forwards; /* Adjusted duration */ } .e-off-canvas-visible { animation: slideInLeft 0.5s forwards; } .e-off-canvas-overlay-hidden { display: none !important; } jQuery(function($){ // Function to hide the Off Canvas and overlay function hideOffCanvas() { $('[class^="e-off-canvas"]').removeClass('e-off-canvas-visible').addClass('e-off-canvas-hidden'); $('.e-off-canvas__overlay').addClass('e-off-canvas-overlay-hidden'); $('body').removeClass('e-off-canvas__no-scroll'); } // Function to show the Off Canvas and overlay function showOffCanvas() { $('[class^="e-off-canvas"]').removeClass('e-off-canvas-hidden').addClass('e-off-canvas-visible'); $('.e-off-canvas__overlay').removeClass('e-off-canvas-overlay-hidden'); $('body').addClass('e-off-canvas__no-scroll'); } // Handle link clicks inside the Off Canvas $(document).on('click', '[class^="e-off-canvas"] a', function(event){ var target = $(this).attr("href"); // Check if the link is an action to close the Off Canvas if (target.includes('elementor-action%3Aaction%3Doff_canvas%3Aclose')) { event.preventDefault(); hideOffCanvas(); return; } var split_url = target.split('#'); // Check if the link is an anchor link within the same page if (split_url.length > 1 && (window.location.pathname == split_url[0] || split_url[0] == '')){ event.preventDefault(); $('html, body').animate({ scrollTop: $('#'+split_url[1]).offset().top }, 1000); hideOffCanvas(); } else { hideOffCanvas(); } }); // Handle the Off Canvas toggle button click $(document).on('click', '.off-canvas-toggle-button', function(event){ showOffCanvas(); // Show the Off Canvas and overlay }); });