(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 #1 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. When we hover on left menu, the right image/container changes giving dynamic options and an interactive experience to users.
Animated Hamburger Icon (Toggle between Open and Close Icon)
- Refer to the video to understand it better.
- 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 #1 (Full Screen)
- dm-off-canvas-bg is the CSS class of the main container.
- dm-toggle-full is the CSS class of the hamburger icon. You can use any widget for the toggle button.
- dm-left-nav is the CSS class of the left container.
- dm-right-nav is the CSS class of the right container.
- dm-nav-text is the CSS class of the texts in left container. (You can use different widget besides Text too, just make sure to give it this same CSS class)
- dm-nav-social is the CSS class of the text on the right container. You can use different widgets too, just give it same CSS class.
- dm-right-img is the CSS class of the image containers on right side. You can add anything in that container.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<style>
.dm-off-canvas-bg {
position: fixed;
right: 0%;
top: 0;
pointer-events: none;
opacity: 0;
overflow-y:scroll;
max-height: 100vh;
}
.dm-off-canvas-bg.visible {
pointer-events: auto;
}
/*Hides scrollbar in webkit browsers like chrome etc*/
.dm-off-canvas-bg::-webkit-scrollbar {
width: 0px;
}
/*Hide scrollbar for firefox*/
.dm-off-canvas-bg {
scrollbar-width: none;
}
.dm-left-nav {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: none !important;
}
.dm-right-nav {
clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
background-size: 100px 100px; /* Grid size */
background-image:
linear-gradient(to right, rgba(255,255,255, 0.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255, 0.05) 1px, transparent 1px);
transition: none !important;
}
.dm-nav-text,
.dm-nav-text .elementor-icon {
transition: none !important;
}
.dm-nav-text:focus,
.dm-nav-text a:focus,
.dm-nav-text .elementor-icon:focus {
outline: 0px !important;
}
/* Make icon in center of mobile */
@media(max-width:767px) {
.dm-nav-text .elementor-icon-box-icon,
.dm-nav-social .elementor-icon-box-icon{
display: flex !important;
align-items: center;
}
}
.dm-right-img {
display: none;
transition: none !important;
overflow: hidden;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const openButtonFull = document.querySelector('.dm-toggle-full');
const offCanvasBg = document.querySelector('.dm-off-canvas-bg');
const dmNavtl = gsap.timeline(); // Define GSAP timeline here
openButtonFull.addEventListener('click', function() {
if (offCanvasBg.classList.contains('visible')) {
offCanvasBg.classList.remove('visible');
dmNavtl.reverse();
body.classList.remove('no-scroll');
} else {
offCanvasBg.classList.add('visible');
offCanvasBg.style.opacity = 1;
dmNavtl.play();
body.classList.add('no-scroll');
}
});
const imageDivs = document.querySelectorAll('.dm-right-img');
const navTextElements = document.querySelectorAll('.dm-nav-text');
imageDivs[0].style.display = 'flex';
navTextElements.forEach((navTextElement, index) => {
navTextElement.addEventListener('mouseenter', function() {
// Hide all divs
imageDivs.forEach(div => div.style.display = 'none');
// Show the corresponding div
imageDivs[index].style.display = 'flex';
});
});
// GSAP animations for text and icon
dmNavtl.pause();
navTextElements.forEach(element => {
element.addEventListener('mouseenter', function() {
gsap.to(element, {
duration: 0.3,
x: 20,
ease: 'power2.out'
});
gsap.to(element.querySelector('.elementor-icon'), {
duration: 0.3,
rotate: -45,
ease: 'power2.out'
});
});
element.addEventListener('mouseleave', function() {
gsap.to(element, {
duration: 0.3,
x: 0,
ease: 'power2.out'
});
gsap.to(element.querySelector('.elementor-icon'), {
duration: 0.3,
rotate: 0,
ease: 'power2.out'
});
});
});
// GSAP timeline definition
dmNavtl.from(".dm-left-nav", {
duration: 1,
clipPath: "polygon(0 0, 100% 0, 100% 0%, 0 0%)",
ease: 'expo.inOut'
});
dmNavtl.from(".dm-right-nav", {
duration: 1,
clipPath: "polygon(0 100%, 100% 100%, 100% 100%, 0 100%)",
ease: 'expo.inOut'
}, '-=1'); //makes this animation start at same time as above by doing -1s
dmNavtl.from('.dm-nav-text', {
duration: 0.3,
x: -150,
stagger: 0.15,
opacity: 0,
ease: 'power4.Out'
}, '0.7');
dmNavtl.from('.dm-nav-social', {
duration: 0.3,
x: 150,
stagger: 0.15,
opacity: 0,
ease: 'power4.Out'
}, '0.7');
dmNavtl.from('.dm-right-img > *', {
xPercent: 120,
duration: 1,
ease: 'power4.out'
}, '1');
});
</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>
