Hi everyone,
I'm working on a projet where I have a menu, and a side-menu.
Every thing is fine: when i click on the menu button the side menu opens, and when i click again it get back to close state.
But if I click to fast the side menu closes but the text inside doesn't disapear, any idea on why please ? :)
(I can't reproduce on codepen so I guess the code here and the two screen would help ^^" )
Screen 1: side menu is closed
Screen 2: side menu is open
Screen 3: side meni is closed but text inside is still visible
My GSAP code:
const handleAnim = () => {
let sideMenuBackground = document.querySelector(".sideMenu__background");
let sideMenu = document.querySelector(".sideMenu");
if (menuCheckbox) {
TweenMax.from(sideMenuBackground, 0, {
width: "0px",
ease: Power1.easeIn
})
TweenMax.to(sideMenuBackground, 0.3, {
width: "324px"
})
TweenMax.from(sideMenu, {
display: "none",
opacity: "0",
ease: Power0.easeNone
})
TweenMax.to(sideMenu, 0.3, {
display: "block",
opacity: "1",
delay: 0.4
})
} else {
TweenMax.to(sideMenu, {
display: "none",
opacity: "0",
ease: Power0.easeNone
})
TweenMax.to(sideMenuBackground, 0.1, {
width: "0",
delay: 0.2
})
}
}
The "handleAnim" function is called in menu burger button and icons button:
<nav className={`navList ${menuCheckbox && "navList__isOpen"}`}>
<div className={menuCheckbox ? "menuBurger__nav menuBurger__cross" : "menuBurger__nav"}>
<input
type="checkbox"
onClick={() => {
handleCheckbox();
}}
/>
<span className="top"></span>
<span className="middle"></span>
<span className="bottom"></span>
</div>
<ul>
<li>
<button onClick={() => {
handleCheckbox();
}}>
<i className="fal fa-folders"></i>
</button>
</li>
<li>
<button onClick={() => {
handleCheckbox();
}}>
<i className="fal fa-balance-scale"></i>
</button>
</li>
<li>
<button onClick={() => {
handleCheckbox();
}}>
<i className="fal fa-receipt"></i>
</button>
</li>
</ul>
</nav>