Akish Posted November 22, 2022 Share Posted November 22, 2022 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();} }); }); Link to comment Share on other sites More sharing options...
GSAP Helper Posted November 22, 2022 Share Posted November 22, 2022 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. Link to comment Share on other sites More sharing options...
Rodrigo Posted November 22, 2022 Share Posted November 22, 2022 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! Link to comment Share on other sites More sharing options...
Akish Posted November 23, 2022 Author Share Posted November 23, 2022 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. Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted November 23, 2022 Solution Share Posted November 23, 2022 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! Link to comment Share on other sites More sharing options...
Akish Posted November 29, 2022 Author Share Posted November 29, 2022 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now