(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 – Animated Modern Menu #2 with Elementor & GSAP
In this tutorial, we are learning to make animated menus with GSAP and Elementor. Keep in mind that not all menus will work perfectly in mobile, so create a different version for mobile version. You will need watch the video above to understand where to add the code due to its complexity. Alternatively, you can purchase the Modern Menu pack to quickly jumpstart your menus.
Animated Modern Menu #2 (Simply Scale Up Reveal – add any shape or image)
- dm-menu-list-2 is the CSS class of the menu items. These can be page links, images or any widget you wish to add in the menu.
- dm-menu-container-2 is the CSS class of the container that contains all the menu list items.
- dm-menu-icon-2 is the CSS class of the icon that opens/closes the menu. You can add a button, text or any widget and give it the class dm-menu-icon-2 and it will open/close the menu container.
- dm-menu-bg-2 is the CSS class of the container that is used for background circle or image.
- Change the color and fill code to choose which colors shows when menu is opened and closed.
- Don’t forget to add overflow-x:clip to your main header container else there would be left/right scroll in different screen sizes.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<style>
.dm-menu-list-2 {
transition: none !important;
}
.dm-menu-container-2 {
transition: none !important;
}
.dm-menu-bg-2 {
position: absolute;
right:-455px;
top:-465px;
scale:1;
transition: none !important;
}
.dm-menu-icon-2 .elementor-icon{
color:white;
fill:white;
transition-delay: 1s !important;
transition: 0.3s;
}
.dm-menu-icon-2.active .elementor-icon{
transition-delay: 0.2s !important;
color:black;
fill:black;
}
</style>
<script>
const dmMenuIcon2 = document.querySelector('.dm-menu-icon-2');
const dmMenuBG2 = document.querySelector('.dm-menu-bg-2');
const dmMenu2 = gsap.timeline();
dmMenu2.pause();
dmMenu2.from('.dm-menu-bg-2', {
scale:0,
duration:0.5,
ease:'power4.Out'
});
dmMenu2.from('.dm-menu-container-2', {
scale:0,
opacity:0,
transformOrigin:'top right',
duration:0.01,
ease:'power3.inOut'
});
dmMenu2.from('.dm-menu-list-2', {
x:50,
opacity:0,
transformOrigin: 'bottom left',
duration: 0.25,
stagger: 0.1,
ease: 'power3.inOut'
});
let dmMenu2Open = false;
dmMenuIcon2.addEventListener('click', () => {
if(dmMenu2Open == false) {
dmMenu2.timeScale(1).play();
dmMenuIcon2.classList.add('active');
}
else {
dmMenu2.timeScale(1).reverse();
dmMenuIcon2.classList.remove('active');
}
dmMenu2Open = !dmMenu2Open;
});
</script>
Animated Modern Menu #2a (Constant Rotating Background)
- dm-menu-list-2a is the CSS class of menu items. Besides page links, you can also add any other widget and give it this class for the animation to work.
- dm-menu-container-2a is the CSS class of the container that contains the menu lists.
- dm-menu-icon-2a is the CSS class of the icon that opens/closes menu. Besides a icon, you can use any other widget like image, lottie etc. to open/close menu.
- dm-menu-bg-2a is the CSS class used for the background image container. To change rotation speed, you can change the duration at line 56.
- Change the color & fill value to your desired color/hex code to choose the menu icon color when it closes/opens.
- Don’t forget to add overflow-x:clip to your main header container else there would be left/right scroll in different screen sizes.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<style>
.dm-menu-list-2a {
transition: none !important;
}
.dm-menu-container-2a {
transition: none !important;
}
.dm-menu-bg-2a {
position: absolute;
right:-505px;
top:-515px;
scale:1;
transition: none !important;
}
.dm-menu-icon-2a .elementor-icon{
color:white;
fill:white;
transition-delay: 1s !important;
transition: 0.3s;
}
.dm-menu-icon-2a.active .elementor-icon{
transition-delay: 0.2s !important;
color:black;
fill:black;
}
</style>
<script>
const dmMenuIcon2a = document.querySelector('.dm-menu-icon-2a');
const dmMenuBG2a = document.querySelector('.dm-menu-bg-2a');
const dmMenu2a = gsap.timeline();
gsap.to('.dm-menu-bg-2a', {
rotate:'360deg',
repeat:-1,
duration:30,
ease:'none'
});
dmMenu2a.pause();
dmMenu2a.from('.dm-menu-bg-2a', {
scale:0,
duration:0.5,
ease:'power4.Out'
});
dmMenu2a.from('.dm-menu-container-2a', {
scale:0,
opacity:0,
transformOrigin:'top right',
duration:0.01,
ease:'power3.inOut'
});
dmMenu2a.from('.dm-menu-list-2a', {
x:50,
opacity:0,
transformOrigin: 'bottom left',
duration: 0.25,
stagger: 0.1,
ease: 'power3.inOut'
});
let dmMenu2aOpen = false;
dmMenuIcon2a.addEventListener('click', () => {
if(dmMenu2aOpen == false) {
dmMenu2a.timeScale(1).play();
dmMenuIcon2a.classList.add('active');
}
else {
dmMenu2a.timeScale(1).reverse();
dmMenuIcon2a.classList.remove('active');
}
dmMenu2aOpen = !dmMenu2aOpen;
});
</script>
Animated Modern Menu #1b (Rotate Once)
- dm-menu-list-2b is the CSS class of menu items. Besides page links, you can also add any other widget and give it this class for the animation to work.
- dm-menu-container-2b is the CSS class of the container that contains the menu lists.
- dm-menu-icon-2b is the CSS class of the icon that opens/closes menu. Besides a icon, you can use any other widget like image, lottie etc. to open/close menu.
- dm-menu-bg-2b is the CSS class of the background container that has the image. You can change the speed and rotation amount at line 57.
- Change the color & fill value to your desired color/hex code to choose the menu icon color when it closes/opens.
- Don’t forget to add overflow-x:clip to your main header container else there would be left/right scroll in different screen sizes.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<style>
.dm-menu-list-2b {
transition: none !important;
}
.dm-menu-container-2b {
transition: none !important;
}
.dm-menu-bg-2b {
position: absolute;
right:-505px;
top:-515px;
scale:1;
transition: none !important;
}
.dm-menu-icon-2b .elementor-icon{
color:white;
fill:white;
transition-delay: 1s !important;
transition: 0.3s;
}
.dm-menu-icon-2b.active .elementor-icon{
transition-delay: 0.2s !important;
color:black;
fill:black;
}
</style>
<script>
const dmMenuIcon2b = document.querySelector('.dm-menu-icon-2b');
const dmMenuBG2b = document.querySelector('.dm-menu-bg-2b');
const dmMenu2b = gsap.timeline();
dmMenu2b.pause();
dmMenu2b.from('.dm-menu-bg-2b', {
scale:0,
rotate:'180deg',
duration:0.5,
ease:'power4.Out'
});
dmMenu2b.from('.dm-menu-container-2b', {
scale:0,
opacity:0,
transformOrigin:'top right',
duration:0.01,
ease:'power3.inOut'
});
dmMenu2b.from('.dm-menu-list-2b', {
x:50,
opacity:0,
transformOrigin: 'bottom left',
duration: 0.25,
stagger: 0.1,
ease: 'power3.inOut'
});
let dmMenu2bOpen = false;
dmMenuIcon2b.addEventListener('click', () => {
if(dmMenu2bOpen == false) {
dmMenu2b.timeScale(1).play();
dmMenuIcon2b.classList.add('active');
}
else {
dmMenu2b.timeScale(1).reverse();
dmMenuIcon2b.classList.remove('active');
}
dmMenu2bOpen = !dmMenu2bOpen;
});
</script>
