Animated Full Screen Modern Menu with Elementor & GSAP #3

(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)

Get Elementor Pro Today –

1 – Elementor Pro

Don’t want to make from scratch? Buy the template instead 🙂

7 Animated Modern Menus – Elementor & GSAP Templates
Design Elements
$5.00
Add to cart

Introduction – Full Screen Animated Modern Menu #2 with Elementor & GSAP

In this tutorial, we are learning to make full screen GSAP animated menu that opens/closes when clicked on our toggle button. This menu is perfect when you have lots of menu items to show. Even if you don’t have lots of items, you can still use it and replace the texts with graphic elements instead.

Animated Hamburger Icon (Toggle between Open and Close Icon)

Refer to this video to understand it better. (https://youtu.be/FzcW342IJ-c?t=202)
Width in .menu-icon changes width of the hamburger icon.
height in .menu-icon changes the distance between each line.
height in .line changes the thickness of the each lines.
.menu-wrapper contains the styling for background, padding, border etc.
Each CSS class has an .active state, change the appropriate values for background, border etc.

				
					<div class="menu-wrapper" id="menu-wrapper">
    <div id="menu-icon" class="menu-icon">
        <div class="line top"></div>
        <div class="line middle"></div>
        <div class="line bottom"></div>
    </div>
</div>
<style>
 :root {
     --dm-normal-delay: 1s;
     --dm-active-delay: 0s;
     --dm-menu-transition: 0.3s;
 }

 .menu-icon {
    width: 30px;
    height: 25px;
    position: relative;
    cursor: pointer;
    transition: transform var(--dm-menu-transition) ease;
    transition-delay: var(--dm-normal-delay);
}

.line {
    width: 100%;
    height: 5px;
    background-color: black;
    position: absolute;
    transition: all var(--dm-menu-transition) ease;
    transition-delay: var(--dm-normal-delay);
}

.top {
    top: 0;
    transition-delay: var(--dm-normal-delay);
}

.middle {
    top: 50%;
    transform: translateY(-50%);
    transition-delay: var(--dm-normal-delay);
}

.bottom {
    bottom: 0;
    transition-delay: var(--dm-normal-delay);
}

.menu-wrapper {
    padding: 10px;
    border: 2px solid black;
    transition: all var(--dm-menu-transition) ease;
    background: white;
    transition-delay: var(--dm-normal-delay);
}

.menu-wrapper.active .menu-icon {
    transform: rotate(360deg);
    transition-delay: var(--dm-active-delay);
}

.menu-wrapper.active .top {
    transform: rotate(45deg);
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    background-color: white;
    transition-delay: var(--dm-active-delay);
}

.menu-wrapper.active .middle {
    opacity: 0;
    transition-delay: var(--dm-active-delay);
}

.menu-wrapper.active .bottom {
    transform: rotate(-45deg);
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
    background-color: white;
    transition-delay: var(--dm-active-delay);
}

.menu-wrapper.active {
    padding: 10px;
    border: 2px solid white;
    transition-delay: var(--dm-active-delay);
    background: black;
}

</style>

<script>
document.getElementById('menu-wrapper').addEventListener('click', function() {
    this.classList.toggle('active');
});
</script>

Grid Div (You can add different backgrounds too)

grid-div is the CSS class of the HTML widget.
You can add your custom patterns too by searching in google for “CSS background Patterns”. Example website https://www.magicpattern.design/tools/css-backgrounds.
Here is an video explanation of creating background patterns – https://www.youtube.com/watch?v=BWoXI5gDsrs

				
					<style>
    
    .grid-div {
        
        position: absolute;
        left: 0;
        top:0;
        height: 100%;
        width: 100%;
        pointer-events: none;
        background-size: 100px 100px;
        background-position: center center;
        /* Grid size */
        background-image:
            linear-gradient(to right, rgba(255,255,255, 0.1) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(255,255,255,0.1) 1px, transparent 1px);
    }
    
</style>

<script>
    
    const dmGrid = document.querySelector('.grid-div');

document.addEventListener('mousemove', (e) => {
    const mouseX = e.pageX;
    const mouseY = e.pageY;
    
    // Calculate the grid position shift
    const shiftX = (mouseX / window.innerWidth) * 50 - 25;
    const shiftY = (mouseY / window.innerHeight) * 50 - 25;
    
    // Apply the shift to the background position
    dmGrid.style.backgroundPosition = `${-shiftX}px ${-shiftY}px`;
});

    
    
</script>

Animated Modern Menu #3 (Full Screen)

dm-full-nav-3 is the CSS class of the main container.
dm-toggle-full-3 is the CSS class of the hamburger icon. You can use any widget for the toggle button.
dm-full-nav-3-text is the CSS class of the texts in the left container.

				
					<style>
    
    .dm-full-nav-3 {
        
        position: fixed;
        left:0;
        top:0;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0s, clip-path 1s ease-in-out;
        overflow-y:scroll;
        max-height: 100vh;
        clip-path: circle(0% at 100% 0%);
    }
    
    
    .dm-full-nav-3.visible {
        
        pointer-events: auto;
        clip-path: circle(100%);

    }
    
    /*Hides scrollbar in webkit browsers like chrome etc*/
    .dm-full-nav-3::-webkit-scrollbar {
        
        width: 0px;
    }
    
    /*Hide scrollbar for firefox*/
    
    .dm-full-nav-3 {
         
    scrollbar-width: none;
            
    }
    
    .dm-full-nav-3-text {
        
        color:rgba(255,255,255,1);
        transition: color 0.1s ease-in-out;
        
    }
    
    .dm-full-nav-3-text.inactive{
        
        color:rgba(255,255,255,0.5);
        
    }
   
    
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>

<script>
    
    const openButtonFull3 = document.querySelector('.dm-toggle-full-3');
    const dmNavFull3 = document.querySelector('.dm-full-nav-3');
   const dmNavText3 = document.querySelectorAll('.dm-full-nav-3-text');
  

    dmNavText3.forEach((dmText3) => {
    
    	dmText3.addEventListener('mouseenter', () => {	
    	dmNavText3.forEach((item) => {
	item.classList.add('inactive')
	});
    	dmText3.classList.remove('inactive');
    	});
    	
    	dmText3.addEventListener('mouseleave', () => {	
	dmNavText3.forEach((item) => {
	item.classList.remove('inactive')
	});
    	dmText3.classList.remove('inactive');
	});
    });
    const dmNavtl3 = gsap.timeline();
    dmNavtl3.pause();  
    
    
    openButtonFull3.addEventListener('click', () => {
        
       if(dmNavFull3.classList.contains('visible')) {
           
        dmNavFull3.classList.remove('visible');   
        //  body.classList.remove('no-scroll');
       
       }
       
       else {
           
        dmNavFull3.classList.add('visible');
        dmNavFull3.style.opacity = 1;
        // body.classList.add('no-scroll');
       }
        
    });
    
</script>

				
					/*No Scroll Code, Only to be used for Static Header*/

<style>
    
     /*Stop scrolling when Full screen Menu is opened*/
    body.no-scroll {
            overflow: hidden !important;
            max-height: 100vh !important;
        }
    
</style>

<script>
    
    const body = document.body;
    
</script>