(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 🙂
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>
Animated Modern Menu #2 (Full Screen)
- dm-full-nav-2 is the CSS class of the main container.
- dm-toggle-full-2 is the CSS class of the hamburger icon. You can use any widget for the toggle button.
- dm-nav-column is the CSS class of each column containers.
- dm-menu-text-1 is the CSS class of the elements in first column. dm-menu-text-2 is the CSS class of the elements in second column. In this code, I have added till 5, but you can easily add more by duplicating the code from lines 122-126. Just make sure to change the numbers in order.
<style>
.dm-full-nav-2 {
position: fixed;
left:0;
top:0;
pointer-events: none;
opacity: 0;
transition: opacity 0s;
overflow-y:scroll;
max-height: 100vh;
}
.dm-full-nav-2.visible {
pointer-events: auto;
}
/*Hides scrollbar in webkit browsers like chrome etc*/
.dm-full-nav-2::-webkit-scrollbar {
width: 0px;
}
/*Hide scrollbar for firefox*/
.dm-full-nav-2 {
scrollbar-width: none;
}
.dm-nav-column {
transition: width 0.5s !important;
}
@media(min-width:1025px) {
.dm-nav-column:hover {
width: 25%;
}
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script>
const openButtonFull2 = document.querySelector('.dm-toggle-full-2');
const dmNavFull2 = document.querySelector('.dm-full-nav-2');
const dmNavtl2 = gsap.timeline();
dmNavtl2.pause();
openButtonFull2.addEventListener('click', () => {
if(dmNavFull2.classList.contains('visible')) {
dmNavFull2.classList.remove('visible');
dmNavtl2.reverse();
// body.classList.remove('no-scroll');
}
else {
dmNavFull2.classList.add('visible');
dmNavFull2.style.opacity = 1;
dmNavtl2.play();
// body.classList.add('no-scroll');
}
});
/*Desktop GSAP animation*/
dmNavResponsive = gsap.matchMedia();
dmNavResponsive.add('(min-width:1025px)', () => {
dmNavtl2.from('.dm-nav-column', {
yPercent:-100,
duration:1,
stagger:-0.2
});
dmNavtl2.add([
gsap.from('.dm-menu-text-1', {
opacity: 0,
duration: 0.3,
stagger: 0.1
}),
gsap.from('.dm-menu-text-2', {
opacity: 0,
duration: 0.3,
stagger: 0.1
}),
gsap.from('.dm-menu-text-3', {
opacity: 0,
duration: 0.3,
stagger: 0.1
}),
gsap.from('.dm-menu-text-4', {
opacity: 0,
duration: 0.3,
stagger: 0.1
}),
gsap.from('.dm-menu-text-5', {
opacity: 0,
duration: 0.3,
stagger: 0.1
})
], "-=0.5");
});
dmNavResponsive.add('(max-width:1024px)', () => {
dmNavtl2.from('.dm-nav-column', {
xPercent:100,
duration:1,
stagger:0.2
});
dmNavtl2.add([
gsap.from('.dm-menu-text-1', {
opacity: 0,
duration: 0.3,
stagger: 0.1
}),
gsap.from('.dm-menu-text-2', {
opacity: 0,
duration: 0.3,
stagger: 0.1
}),
gsap.from('.dm-menu-text-3', {
opacity: 0,
duration: 0.3,
stagger: 0.1
}),
gsap.from('.dm-menu-text-4', {
opacity: 0,
duration: 0.3,
stagger: 0.1
}),
gsap.from('.dm-menu-text-5', {
opacity: 0,
duration: 0.3,
stagger: 0.1
})
], "-=0.5");
});
</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>
