Hello !
I'm aware this is probably an easily fixable mistake, but I'm still very new to web development, especially using gsap. Basically I have a navbar that I want to open and close with onClick() on the same button in React. I tried following multiples tutorials and forum posts, but I am still struggling to make it work like I want it to.
I'd appreciate any help, tips or answers. Thank you in advance for your time !
(I also don't really use codepen but I am more than willing to try and use it, if it's of use for you)
function Navbar() {
const [navbarIsOpen, setNavbarIsOpen] = useState(false);
function NavbarAnimate() {
const tl = gsap.timeline({
reversed: navbarIsOpen,
})
tl.fromTo(".navbar-link", {
x:-400,
opacity:0
},{
x:0,
opacity:1,
stagger:-0.02
})
tl.fromTo("#navbar", {
backgroundColor: "rgb(12, 17, 23, 0.0)"
},{
backgroundColor: "rgb(12, 17, 23, 0.8)"
})
tl.reversed() ? tl.play() : tl.reverse()
}
And here is the onClick() I use on my button :
<i className="..." onClick={() => {
setNavbarIsOpen(!navbarIsOpen);
NavbarAnimate();
}}/>
Thank you again for taking the time to check out my problem, and sorry if this is a redundant and recurring mistake !
(Excuse my english as I'm not a native speaker)