Jump to content
Search Community

eyeseesun

Members
  • Posts

    1
  • Joined

  • Last visited

Everything posted by eyeseesun

  1. Hey there! First thing, dope library. I just started learning it not too long ago and it's so much fun, really sky-rocketed my front end development. Now the problem that I'm having is that I'm trying to make a mobile first responsive site for a friend of mine, but my menu animation is not working when the screen resolution is below the media query requirement. This is my typescript code of the animation. let width = $(window).width(); if(width > 600){ this.menuAnimation .to(menuArea, .35, {right: '0px'}, 'open') .addPause() .to(menuArea, .35, {right: '-300px'}, 'close') .call(()=>{ this.menuAnimation.restart(); this.menuAnimation.pause(); }); } else if(width < 600){ this.menuAnimation .to(menuArea, 0, {right: '0vw'}, 'open') .addPause() .call(()=>{ console.log('open'); }) .to(menuArea, 0, { right: '-100vw'}) .addPause() .call(()=>{ console.log('close'); this.menuAnimation.restart(); this.menuAnimation.pause(); }); } This is the site so far full screen with the open and closed menu (the width > 600 animation). Then you click the x and it finishes the animation after the first pause. But this is what's happening on mobile when I click the hamburger menu. If it's hard to see, the 'open' 'close' console logs show up when you click the hamburger menu. It plays the whole animation without the pauses. And beyond that, when I click the menu again, the animation doesn't fire, unlike when it's full screen. Can anybody point me in a direction? -Regards
×
×
  • Create New...