Animated 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 – Animated Modern Menus with Elementor & GSAP

In this tutorial, we are learning to make a trendy reveal menu with Elementor and GSAP. We use clip path to create this cool circular reveal. Based on whether you want to use sticky header or not, the method you use to add the menu to your header differs. Please watch the video to understand it clearly.

For checking it on full page, visit above product page and click on “Live preview”.

Animated Modern Menu Reveal with Clip path – Elementor and GSAP

dm-menu-icon-3 is the CSS class of the icon that opens/closes the menu. You can use other widget too instead of icon widget, just make sure to give it this class.
dm-menu-container-3 is the CSS class of the parent Menu Container.
dm-menu-list-3 is the CSS class of the menu lists or page links on left side.
dm-menu-content-3 is the CSS class of the right contents container that switches based on which dm-menu-list-3 is hovered on.
dm-menu-box is the CSS class of the video container at bottom right. You can add anything in this container, it doesn’t just to be a video.
You can change the following code in Javascript(GSAP) ‘ clipPath: ‘circle(0% at 100% 0%)‘,’ to ” clipPath: ‘circle(0% at 0% 0%)’, to make the container open from top left

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

<style>
    
    .dm-menu-container-3 {
        
        position: absolute;
        right: 0;
        top:0;
        clip-path: circle(150% at 100% 0%);
        transition: none !important;
        
    }
    
    .dm-menu-content-3 {
        
        display: none;
        
    }
    
    .dm-menu-content-3.active {
        
        display: flex;
        
    }
    
    .menu-3-arrow {
        
        font-size: 35px;
        
        
    }
    
    .dm-menu-list-3 {
        
        overflow: hidden;
        
    }
    
    .dm-menu-box {
        
        transition: none !important;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        
    }
    
    
    .dm-menu-icon-3 .elementor-icon{
        
        color:white;
        fill:white;
        transition-delay: 1s !important;
        transition: 0.3s;
    }
    
    .dm-menu-icon-3.active .elementor-icon{
        
        transition-delay: 0.2s !important;
        color:black;
        fill:black;
        
    }
    
</style>

<script>

const dmMenuList3 = document.querySelectorAll('.dm-menu-list-3');
const dmMenuContent3 = document.querySelectorAll('.dm-menu-content-3');
const dmMenuIcon3 = document.querySelector('.dm-menu-icon-3');

dmMenuList3.forEach((dmMenuListItem3, index) => {
    dmMenuListItem3.addEventListener('mouseover', () => {
        dmMenuContent3.forEach(content => content.classList.remove('active'));
        dmMenuContent3[index].classList.add('active');
    });
});

const dmMenu3 = gsap.timeline();

dmMenu3.pause();

    dmMenu3.from('.dm-menu-container-3', {
        
       clipPath: 'circle(0% at 100% 0%)',
       duration:1,
       ease: 'power2.inOut'
        
    });
    
    dmMenu3.from('.dm-menu-list-3 .elementor-heading-title', {
        
       y:80,
       duration:0.3,
       stagger:0.1,
       ease:'power2.out'
        
    },'-=0.2');
    
     dmMenu3.from('.dm-menu-list-3-contact', {
        
       scale:0,
       duration:0.3,
       transformOrigin: 'left center',
       ease:'power2.out'
        
    },'-=0.2');
    
    dmMenu3.from('.dm-menu-content-3', {
        
       opacity:0,
       duration:0.3,
       ease:'power2.out'
        
    });
 
     
    dmMenu3.from('.dm-menu-box', {
        
       clipPath:'polygon(100% 0, 100% 0, 100% 100%, 100% 100%)',
       duration:0.5,
       ease:'power2.out'
    },'-=0.5');
   
    let dmMenu3Open = false;
    
    dmMenuIcon3.addEventListener('click', () => {
        
        if(dmMenu3Open == false) {
            dmMenu3.timeScale(1).play();
            dmMenuIcon3.classList.add('active');
        }
        else {
            dmMenu3.timeScale(1).reverse();
            dmMenuIcon3.classList.remove('active');
        }
        
        dmMenu3Open = !dmMenu3Open;
        
    });
   
</script>