Click event delays animation after few clicks.

[Akish]

Hi, I've started with GSAP recently and I'm working on a project and the click event animation works fine first 2-3 times but then it starts delaying the animation for more than 6-7 seconds. I'm trying to not duplicate the menu node so I'm trying to animate the same menu differently on mobile and desktop. I'll attach some screenshots below for better understanding. I can't provide codepen because it's a WordPress project, I'm not using any builder plugin. The menu is supposed to be closed by default and on resize on mobile while appearing on the right side. And on desktop it's supposed to be open on the left by default and on resize.

 

gsap.registerPlugin(ScrollTrigger);
document.addEventListener('DOMContentLoaded', function(){    
    let navTl = gsap.timeline({ paused: true, yoyo:true, reversed: true });
    const header = {
        main: document.querySelector('.site-header'),
        leftNav: document.querySelector('.leftNavWrap'),
        button: document.querySelector('.siteToggler button'),
        sections: document.querySelector('.marginWrapper')
    }  
    
    function debounce(func){
        let timer;
        return function(event){
            if(timer) clearTimeout(timer);
            timer = setTimeout(func, 100, event);
        };
    }
    function leftNavPosition(func){
        const headerHeight = header.main.offsetHeight;
        header.leftNav.style.top = headerHeight + 'px';
        func();
    }
    function updateNavOnResize(){
        let isMobile = window.matchMedia('(max-width: 991px)');
        if(isMobile.matches){
            gsap.to('.leftNavWrap', {x: '100%', duration: 0});
        } else{
            gsap.to('.leftNavWrap', {x: '0', duration: 0});
        }
    }
    window.addEventListener('resize', debounce(function(e){        
        leftNavPosition(updateNavOnResize);
    }));
    leftNavPosition(updateNavOnResize);
    function toggleNav(){
        let mq = gsap.matchMedia();
        mq.add({
            isMobile: '(max-width: 991px)',
            isDesktop: '(min-width: 992px)'
        }, (context)=>{
            let {isMobile, isDesktop} = context.conditions;
            navTl.to('.leftNavWrap', {
                duration: 1,
                x: isMobile ? '0' : '-100%' ,
                ease: Expo.easeInOut,
            });
        });        
        navTl.reversed() ? navTl.play() : navTl.reverse();
    }
    const button = document.querySelector('.siteToggler button');
    button.addEventListener('click', function(){
        const currentState = button.getAttribute("data-state");
        if (!currentState || currentState === "closed") {
            button.setAttribute("data-state", "opened");
            button.setAttribute("aria-expanded", "true");
        } 
        else {
            button.setAttribute("data-state", "closed");
            button.setAttribute("aria-expanded", "false");
        }
        if(!navTl.isActive()){toggleNav();}                
    });
});

 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Rodrigo]

Hi @Akish and welcome to the GreenSock forums!

 

There are a few things that caught my attention in the code you posted. In the button click event handler you are calling the toggleNav method which will execute the Match Media block again, there is no need for that just toggle the timeline you already created when the button is clicked, just that. Also that could be the reason your animation takes longer after each click event, because everytime you click on the button you are adding a new instance to the timeline making it longer every time.

 

Also with GSAP you don't need to pass a percentage value to create responsive animations, just use xPercent and GSAP will do the rest for you:

if(isMobile.matches){
  gsap.to('.leftNavWrap', {xPercent: 100, duration: 0});
} else{
  gsap.to('.leftNavWrap', {xPercent: 0, duration: 0});
}

 

Let us know if you have more questions and remember to include a minimal demo.

 

Happy Tweening!

[Akish]

On 11/22/2022 at 8:24 PM, Rodrigo said:

Hi @Akish and welcome to the GreenSock forums!

 

There are a few things that caught my attention in the code you posted. In the button click event handler you are calling the toggleNav method which will execute the Match Media block again, there is no need for that just toggle the timeline you already created when the button is clicked, just that. Also that could be the reason your animation takes longer after each click event, because everytime you click on the button you are adding a new instance to the timeline making it longer every time.

 

Also with GSAP you don't need to pass a percentage value to create responsive animations, just use xPercent and GSAP will do the rest for you:

if(isMobile.matches){
  gsap.to('.leftNavWrap', {xPercent: 100, duration: 0});
} else{
  gsap.to('.leftNavWrap', {xPercent: 0, duration: 0});
}

 

Let us know if you have more questions and remember to include a minimal demo.

 

Happy Tweening!

Hi, I've included the minimal demo now. 

See the Pen NWzYaXe by akishjoseph (@akishjoseph) on CodePen

 

The click even is working fine without any delay on the demo. But I'm stuck with other issues.
Here's what I'm trying to achieve:
On mobile initially and on resize the menu should be hidden by default even if open on desktop and on click should slide in from the right.
On Desktop it should slide in from the left and be open by default even if it closed on mobile. 

Seems pretty simple but I'm stuck. And I'm trying to not duplicate the menu for different screens. 

[Rodrigo]

Hi,

 

I think you are over complicating your approach IMHO. This is far simpler and seems to work as you expect:

See the Pen ExREpKX by GreenSock (@GreenSock) on CodePen

 

Hopefully is what you're looking for. Let us know if you have more questions.

 

Happy Tweening!

[Akish]

On 11/24/2022 at 3:26 AM, Rodrigo said:

Hi,

 

I think you are over complicating your approach IMHO. This is far simpler and seems to work as you expect:

 

 

 

Hopefully is what you're looking for. Let us know if you have more questions.

 

Happy Tweening!

Thank you so much for this! I was over-complicating things as always.