Clone the project here

Masked out page transition

Note that this page transition uses a JS script to allow for the page transition to happen. Customise it to fit your project.

Go the the effect

<script></script>
 $('.transition-trigger').click(function (e) {
   e.preventDefault();
   var goTo = this.getAttribute("href");    setTimeout(function(){
        window.location = goTo;
   },1000);      
});

<script></script>
 // Prevent scrolling on click
$('.lottie-menu').click(function (e) {
e.preventDefault();
$('body').css('overflow', 'hidden');
});
/* Allow back page scrolling by clicking on the element with the necessary class name. If you have several close elements with the same action like a close button and cancel button, write classes by a comma.*/
$('.lottie-menu, .menu-wrapper').click(function (e) {
e.preventDefault();
$('body').css('overflow', 'auto');
});